HTTP üstbilgileri neden aygıt çözünürlüğü, piksel yoğunluğu vb. İçermiyor?

Şu anda CSS medya sorgularıyla duyarlı bir web sitesi geliştiriyorum. Sunucu her görünüm için farklı bir HTML / CSS döndürürse çok daha kolay olurdu.
Neden bir HTML dosyası isterken istemcinin görüntü alanı bilgilerini ekleyemediğini merak ediyordum. Bu davranış, Accept-Languagebaşlıkları kullanarak web sitelerini doğru dilde döndürmek için zaten yaygındır .

Kısacası, Wild Wild Web'in çalışması için bu şekilde tasarlanmamıştı.

Özgün tasarım, HTML'nin tarayıcıya belge hakkında ipuçları vermesiydi. Hangi bitleri vurgulamak, nereye görüntü dosyaları almak için gitmek için. Yazı tipi (ve hangi boyutta) ile ilgili kararlar, tarayıcının ve yerel yapılandırma ayarlarının işi idi.

Evet, dünyanın ilerlediğini biliyorum ve şimdi web tasarımcıları gözlerimizin görebileceği her pikseli kontrol etmeyi bekliyor. Geçmişte, masaüstü temasının bunu yapması gereken iş buydu.

Bence tamamen Duyarlı Web Tasarımı fikriniz yok . Müşterinin web tarayıcısına dayalı olarak farklı HTML / CSS / JS sunmak bir süredir var ve hala bunu yapan bazı web siteleri olduğundan eminim - çok açık bir örnek, bir mobil hizmet sunmanın eski okul yoludur bir web sitesi için dostça tema.

Benim düşünceme göre, eksik olan şey, senaryonuzda, kullanıcı görünüm portunu dikeyden yataya değiştirirse, sayfayı yenilemediğiniz sürece duyarlı bir cevap alamazsınız. Web tarayıcı penceresini yeniden boyutlandırırsanız veya varsayılan yakınlaştırmayı değiştirirseniz aynı işlem gerekir. Ayrıca sayfadaki bir öğe diğer öğelere de yanıt verebilir. Örneğin, sağdaki kenar çubuğunu gizlerseniz, ana içerik değişikliğe yanıt verir. Sayfayı yenilemediğiniz sürece bunlar tekrar yolunuzda mümkün olmayacak.

Ayrıca HTTP istekleri sadece web sayfasının tamamını sunuculamak için tasarlanmamıştır . Çoğu durumda, görünüm bağlantı noktası meta bilgilerini taşıması gerekmeyen düz veri, dosya, resim vb. Gönderme / alma isteği gönderiyorsunuz ve internet gibi bir ölçekte yükü çok fazla olacak sanırım .

Eğer Are emin Duyarlı tasarımı yapıyoruz? Duyarlı tasarım teknik olarak akışkan tasarımı ve medya sorgularının birleşimidir.

Akışkan tasarım, işleri nasıl düzenlediğiniz konusunda akıllıysanız, görünüm sorununun% 90'ını sizin için çözer. Medya sorguları, mevcut boyutlara göre ızgara özelliklerini değiştirerek size% 10 daha fazlasını sağlar.

Yalnızca akışkan (her yerdeki yüzdeler, her şeyin göreli boyutlandırılması, piksel olarak belirtilen hiçbir şey vb.) Yapmaya çalışıyorsanız, görünüm alanı boyut olarak önemli ölçüde farklı olduğunda (masaüstü manzara görünümü vs mobil portre görünümü). 2048px'den 640px'e geçtiğinizde bazı şeyler sığmıyor. Yalnızca medya sorguları yapmaya çalıştığınızda, düzinelerce ve düzinelerce medya sorgusu kesmesi ile sonuçlanırsınız ve bu durumda temel olarak CSS sınıflarınızı mikro yönetirsiniz. Her iki yaklaşım da RWD için yeterli değildir - her şeyi elde etmek için ikisini birleştirmeniz gerekir.

Tavsiyem: Masaüstü manzara, iPad portre ve manzara, iPhone portre ve manzara gibi üç veya dört farklı "nominal çözünürlük ve yönlendirme" oluşturun ve bunları çalışmak için tel çerçeveleriniz olarak kabul edin. Ardından bu aralar için medya sorgularınızı ayarlayın. Daha sonra, bunu gerçekleştirmek için sıvı düzenleri kullanarak bu büyük molalara sadık kalmak için çok çalışın - büyük olasılıkla bir tür CSS ızgarasıyla (sizin için önceden oluşturulmuş düzinelerce var veya kendi rulolarınızı oluşturabilirsiniz).

İçeriği getiren dinamik bir web siteniz varsa, bunun gibi bir kod işe yarayacaktır (ES6'da):

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

Not: 'kimlik bilgileri' oturum çerezi içindir

Daha sonra bu başlıkları sunucu tarafı ile okuyabilirsiniz (PHP'de):

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

Bu, kullanıcının tarayıcı penceresini sayfa yeniden yüklemeden yeniden boyutlandırabilmesinin basit bir nedeni için çalışmaz.

Duyarlı tasarım, farklı görünüm alanı boyutlarına ve diğer faktörlere yanıt olarak düzenin dinamik olarak değiştiği anlamına gelir. Bu nedenle tasarım, istek sırasında görünüm boyutuna göre sunucu tarafında sabitlenirse, pencere kullanıcı tarafından yeniden boyutlandırılırsa yanıt vermeyecektir. Bu nedenle medya sorguları istemci tarafında değerlendirilir.