Mengapa tajuk HTTP tidak menyertakan resolusi perangkat, kerapatan piksel, dll.?

10

Saat ini saya sedang mengembangkan situs web responsif dengan kueri media CSS. Akan jauh lebih mudah jika server mengembalikan HTML / CSS yang berbeda untuk setiap viewport.
Saya bertanya-tanya mengapa klien tidak bisa memasukkan informasi viewport ketika meminta file HTML. Perilaku ini sudah umum untuk mengembalikan situs web dalam bahasa yang benar menggunakan Accept-Languageheader.

http

— eliocs
sumber

Anda bisa mengirimkannya melalui JavaScript dan kemudian sideload file CSS. Saya pikir masalahnya adalah, bahwa resolusi dapat berubah ...

— Knerd

Itu bukan RWD. HTML / CSS itu tidak akan memberi Anda efek responsif apa pun kecuali Anda menyegarkan halaman.

— Mahdi

Resolusi, gaya font, ukuran font, jenis browser, ukuran layar, ini semua bisa berubah dari perangkat ke perangkat, Anda menanyakan pertanyaan jenis web 1.0, baik pindah ke sesuatu yang dinamis seperti ASP, PHP, menambahkan Javascript, dll. Atau menjadi senang dengan pemilih media yang html berikan kepada Anda.

— Jeff Langemeier

1

Bagaimana jika perangkat lunak tanpa kemampuan menampilkan gambar sama sekali meminta html Anda alih-alih peramban? Seperti pembaca layar? Atau browser berbasis terminal?

— Jack

18

Singkatnya, bukan itu cara Wild Wild Web dirancang untuk bekerja.

Desain aslinya hanya karena HTML memberi petunjuk browser tentang dokumen. Bit mana yang harus ditekankan, ke mana harus pergi untuk mendapatkan file gambar. Keputusan tentang font (serta ukuran apa) adalah tugas browser dan pengaturan konfigurasi lokal.

Ya, saya tahu dunia telah berubah, dan sekarang perancang web berharap untuk mengontrol setiap piksel yang bisa dilihat mata kita. Di masa lalu, itu adalah tugas tema desktop untuk melakukan itu.

— Michael Shaw
sumber

3

Saya akan mengatakan bahwa bahkan hari ini itu harus menjadi pekerjaan perangkat. Siapkan beberapa set CSS minimal yang berbeda dan biarkan perangkat menanganinya dari sana.

— Jeff Langemeier

@JeffLangemeier Sepenuhnya setuju. Bahkan pada dasarnya jawaban ini benar, tetapi tidak berbicara tentang RWD sama sekali.

— Mahdi

1

Mungkin waktu untuk mendesain ulang format web baru yang sepenuhnya memisahkan konten dari desain :)

— eliocs

@ Mahdi Saya tidak benar-benar merasa seperti pertanyaannya tentang RWD pada dasarnya, itu adalah seseorang yang mencoba untuk menemukan kembali roda dan bertanya-tanya mengapa spesifikasi HTML tidak memiliki <kebutuhan pribadi yang sewenang-wenang>.

— Jeff Langemeier

@eliocs ada, itu disebut html dan CSS. HTML adalah struktur, dan CSS adalah desain. Atau jika Anda ingin pemisahan konten total dari desain Anda, buka sistem dinamis seperti PHP, Django in python, dll ...

— Jeff Langemeier

8

Saya pikir Anda belum sepenuhnya mendapat ide tentang Desain Web Responsif . Melayani berbagai HTML / CSS / JS berdasarkan browser web klien telah ada untuk sementara waktu dan saya cukup yakin masih ada beberapa situs web yang masih melakukan itu - contoh yang sangat jelas adalah cara sekolah lama dalam melayani seluler tema-ramah untuk situs web.

Apa yang Anda lewatkan, menurut saya, adalah dalam skenario Anda jika pengguna mengubah view-port dari portrait ke landscape, maka Anda tidak akan mendapatkan jawaban responsif apa pun, kecuali jika Anda me-refresh halaman. Tindakan yang sama diperlukan jika Anda mengubah ukuran jendela browser web atau mengubah zoom default. Juga elemen dalam halaman bisa responsif terhadap elemen lain juga. Jadi, jika Anda menyembunyikan bilah sisi di sebelah kanan, misalnya, konten utama akan merespons perubahan tersebut. Ini tidak akan mungkin menghalangi Anda, sekali lagi, kecuali jika Anda me-refresh halaman.

Juga permintaan HTTP tidak hanya dirancang untuk server seluruh halaman web. Dalam banyak kasus, Anda mengirim permintaan untuk mengirim / menerima data, file, gambar, dll. Yang tidak perlu mereka bawa pada informasi meta view-port dan overhead dalam skala seperti Internet akan banyak kurasa .

— Mahdi
sumber

The overhead yang akan berguna melayani gambar juga, bayangkan Anda kembali gambar resolusi yang lebih kecil untuk perangkat mobile. Saya setuju bahwa perubahan viewport setelah halaman dimuat adalah cacat besar pada pertimbangan saya.

— eliocs

@eliocs Anda benar, untuk gambar sebenarnya itu hal yang penting. Terima kasih atas koreksinya.

— Mahdi

Saya tidak berpikir bahwa ini adalah masalah langsung yang coba dipecahkan oleh desain responsif. Dalam kebanyakan kasus, tujuan ini adalah untuk memastikan bahwa jumlah sumber daya terkecil yang diperlukan untuk render pertama disediakan. Anda masih akan memberikan desain responsif di atas ini. Memiliki informasi dalam permintaan tidak melarang desain responsif. Misalnya, Anda mungkin menggunakan HTTP2 untuk mendapatkan gambar yang tepat untuk srcset di respons pertama. Anda tidak dapat melakukan ini kecuali jika Anda memiliki informasi ukuran viewport, tetapi Anda masih dapat menggunakan srcset untuk menjaga hal-hal responsif.

— monokrom

2

Anda yakin sedang melakukan desain responsif? Desain responsif secara teknis adalah kombinasi dari desain cairan dan permintaan media.

Desain cairan memecahkan 90% dari masalah viewport untuk Anda, jika Anda cerdas tentang bagaimana Anda mengeluarkan barang. Kueri media memberi Anda 10% lainnya dengan mengubah karakteristik kisi berdasarkan dimensi saat ini.

Jika Anda mencoba untuk melakukan hanya cairan (persentase di mana-mana, ukuran relatif pada segala sesuatu, tidak ada yang ditentukan dalam piksel, dll.) Anda mengalami masalah apa yang harus dilakukan ketika ukuran viewport secara dramatis berbeda (seperti tampilan lansekap desktop vs (tampilan potret seluler). Beberapa hal tidak sesuai ketika Anda beralih dari 2048px ke 640px. Saat Anda hanya mencoba melakukan kueri media, Anda berakhir dengan puluhan dan puluhan jeda permintaan media, dan pada dasarnya Anda mengatur secara mikro kelas CSS Anda dalam kasus itu. Tidak ada pendekatan yang memadai untuk RWD - Anda harus menggabungkan keduanya untuk mendapatkan semuanya.

Saran saya: buat tiga atau empat "resolusi dan orientasi nominal" yang berbeda - seperti lansekap Desktop, potret iPad dan lansekap, potret iPhone dan lansekap - dan perlakukan mereka sebagai wireframe Anda untuk bekerja. Kemudian atur kueri media Anda untuk jeda itu. Kemudian bekerja sangat keras untuk tetap berpegang pada beberapa jeda itu, menggunakan tata letak cairan untuk mencapainya - kemungkinan besar dengan kisi-kisi CSS dari beberapa jenis (ada puluhan dari mereka prebuilt untuk Anda, atau Anda dapat menggulung Anda sendiri).

— Calphool
sumber

1

Jika Anda memiliki situs web dinamis yang mengambil konten, kode seperti ini akan melakukan trik (dalam ES6):

var headers = new Headers();
    headers.set('window-w', window.innerWidth);  // or $('html').width()  with jQuery
    headers.set('window-h', window.innerHeight); // or $('html').height() with jQuery
fetch(url, {'credentials': 'include', 'headers': headers})
.then(function(response) {
    ...

Catatan: 'kredensial' untuk cookie sesi

Kemudian Anda dapat membaca header sisi server dengan misalnya (dalam PHP):

$headers = getallheaders();
if (isset($headers['window-w']) and isset($headers['window-h'])) {
    $window_w = 1 * $headers['window-w'];
    $window_h = 1 * $headers['window-h'];
    if ($window_w * $window_h > 0) {
        ...

— Ame Nomade
sumber

Ini satu-satunya jawaban yang benar sekarang.

— marvindanig

1

Ini tidak akan berfungsi karena alasan sederhana bahwa pengguna dapat mengubah ukuran jendela browser tanpa memuat ulang halaman.

Desain responsif berarti tata letak berubah secara dinamis sebagai respons terhadap berbagai ukuran area pandang dan faktor lainnya. Jadi jika desain diperbaiki di sisi server berdasarkan ukuran viewport pada saat permintaan, itu tidak akan responsif jika jendela diubah ukurannya oleh pengguna. Inilah sebabnya mengapa pertanyaan media dievaluasi pada sisi klien.

— JacquesB
sumber