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

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.

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.

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 .

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).

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) {
        ...

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.