Dlaczego nagłówki HTTP nie zawierają rozdzielczości urządzenia, gęstości pikseli itp.?

Obecnie tworzę responsywną stronę internetową z zapytaniami o media CSS. Byłoby znacznie łatwiej, gdyby serwer zwrócił inny kod HTML / CSS dla każdej rzutni.
Zastanawiałem się, dlaczego klient nie mógł dołączyć informacji o rzutni podczas żądania pliku HTML. To zachowanie jest już powszechne w przypadku zwracania stron internetowych w odpowiednim języku za pomocą Accept-Languagenagłówka.

Krótko mówiąc, nie tak zaprojektowano Wild Wild Web.

Pierwotny projekt polegał na tym, że HTML zawierał wskazówki przeglądarki dotyczące dokumentu. Które bity podkreślić, gdzie szukać plików graficznych. Decyzje dotyczące czcionki (a także jej rozmiaru) były zadaniem przeglądarki i lokalnych ustawień konfiguracji.

Tak, wiem, że świat się zmienił, a teraz projektanci stron internetowych oczekują kontroli każdego piksela, jaki zobaczą nasze oczy. W przeszłości była to praca motywu pulpitu.

Myślę, że nie masz pojęcia o Responsive Web Design . Obsługiwanie różnych HTML / CSS / JS w oparciu o przeglądarkę internetową klienta istnieje już od jakiegoś czasu i jestem prawie pewien, że wciąż istnieją pewne strony internetowe - bardzo wyraźnym przykładem jest oldskulowy sposób obsługiwania telefonu komórkowego przyjazny dla strony internetowej.

Moim zdaniem brakuje w moim scenariuszu, jeśli użytkownik zmieni port widzenia z pionowego na poziomy, wtedy nie otrzymasz żadnej odpowiedzi, chyba że odświeżysz stronę. Ta sama czynność jest wymagana, jeśli zmienisz rozmiar okna przeglądarki internetowej lub zmienisz domyślne powiększenie. Również element na stronie może reagować na inne elementy. Jeśli na przykład ukryjesz pasek boczny po prawej stronie, główna treść zareaguje na zmianę. Nie będzie to możliwe na swój sposób, chyba że odświeżysz stronę.

Również żądania HTTP nie są przeznaczone tylko do obsługi całej strony internetowej. W wielu przypadkach wysyłasz prośbę o wysyłanie / odbieranie zwykłych danych, plików, obrazów itp., Które nie muszą zawierać meta informacji o porcie widokowym, a narzut w skali takiej jak Internet będzie dużo .

Czy na pewno wykonujesz elastyczne projektowanie? Elastyczne projektowanie jest technicznie połączeniem płynnego projektowania i zapytań o media.

Płynna konstrukcja rozwiązuje dla Ciebie 90% problemu z rzutnią, jeśli masz sprytne podejście do układu. Zapytania o media dają ci pozostałe 10%, zmieniając charakterystykę siatki w oparciu o bieżące wymiary.

Jeśli próbujesz robić tylko płynne (wartości procentowe wszędzie, względny rozmiar wszystkiego, nic nie jest określone w pikselach itp.), Masz problem z tym, co zrobić, gdy rzutnia ma radykalnie różny rozmiar (np. Widok poziomy pulpitu vs , mobilny widok pionowy). Niektóre rzeczy po prostu nie pasują, gdy przechodzisz z 2048 na 640 pikseli. Gdy próbujesz wykonywać tylko zapytania o media, kończy się to dziesiątkami przerw w zapytaniach o media i w takim przypadku w zasadzie zarządzasz mikromanizacją klas CSS. Żadne z tych podejść nie jest odpowiednie dla RWD - musisz połączyć oba, aby uzyskać wszystko.

Moja rada: stwórz trzy lub cztery różne „nominalne rozdzielczości i orientacje” - takie jak Desktop krajobraz, iPad pionowy i poziomy, iPhone pionowy i poziomy - i traktuj je jak szkielety do pracy. Następnie skonfiguruj zapytania dotyczące multimediów dla tych przerw. Następnie bardzo ciężko pracuj, aby trzymać się tych kilku przerw, korzystając z płynnych układów, aby to osiągnąć - najprawdopodobniej z pewnego rodzaju siatką CSS (jest ich kilkadziesiąt wstępnie przygotowanych lub możesz wykonać własne).

Jeśli masz dynamiczną witrynę internetową, która pobiera treść, taki kod załatwi sprawę (w 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) {
    ...

Uwaga: „dane uwierzytelniające” dotyczą ciasteczka sesyjnego

Następnie możesz przeczytać te nagłówki po stronie serwera, na przykład (w 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) {
        ...

To nie zadziała z prostego powodu, że użytkownik może zmienić rozmiar okna przeglądarki bez ponownego ładowania strony.

Elastyczne projektowanie oznacza, że ​​układ zmienia się dynamicznie w odpowiedzi na różne rozmiary rzutni i inne czynniki. Jeśli więc projekt zostanie naprawiony po stronie serwera w oparciu o rozmiar rzutni w momencie żądania, nie będzie reagować, jeśli użytkownik zmieni rozmiar okna. Dlatego zapytania o media są oceniane po stronie klienta.