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

10

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.

eliocs
źródło
Możesz wysłać go przez JavaScript, a następnie sideload załadować plik CSS. Myślę, że problem polega na tym, że rozdzielczość może się zmienić ...
Knerd
To nie jest RWD. Te HTML / CSS nie dadzą żadnego responsywnego efektu, dopóki nie odświeżysz strony.
Mahdi
Rozdzielczość, style czcionek, rozmiary czcionek, typ przeglądarki, rozmiar ekranu - wszystkie można zmieniać w zależności od urządzenia, zadajesz pytanie typu web 1.0, możesz przejść do czegoś dynamicznego, takiego jak ASP, PHP, dodając Javascript itp. zadowolony z selektora multimediów, który daje ci HTML.
Jeff Langemeier
1
Co jeśli oprogramowanie bez możliwości wyświetlania obrazu w ogóle prosi o Twój HTML zamiast przeglądarki? Takich jak czytnik ekranu? A może przeglądarka terminalowa?
Jack

Odpowiedzi:

18

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.

Michael Shaw
źródło
3
Powiedziałbym, że nawet dzisiaj powinno to być zadanie urządzenia. Skonfiguruj kilka różnych minimalnych zestawów CSS i pozwól urządzeniom sobie z tym poradzić.
Jeff Langemeier
@JeffLangemeier Całkowicie się zgadzam. Nawet jeśli ta odpowiedź jest zasadniczo poprawna, jednak wcale nie mówi o RWD.
Mahdi
1
Może czas na przeprojektowanie nowego formatu internetowego, który całkowicie oddziela treść od projektu :)
eliocs
@Mahdi Tak naprawdę nie wydaje mi się, żeby pytanie dotyczyło RWD w gruncie rzeczy, to była osoba próbująca wynaleźć koło i zastanawiająca się, dlaczego specyfikacja HTML nie ma <arbitralnej osobistej potrzeby>.
Jeff Langemeier
@ Tam jest tam, nazywa się html i CSS. HTML jest strukturą, a CSS jest projektem. Lub jeśli chcesz całkowicie oddzielić treść od swojego projektu, przejdź do dynamicznego systemu, takiego jak PHP, django w python itp.
Jeff Langemeier
8

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 .

Mahdi
źródło
Napowietrznych byłby przydatny służąc obrazy też, wyobraź sobie, że wrócił mniejsze rozdzielczości obrazów dla urządzeń mobilnych. Zgadzam się, że zmiany w rzutni po załadowaniu strony są dużą wadą.
eliocs
@eliocs Masz rację, ponieważ zdjęcia są naprawdę ważne. Dziękuję za poprawienie mnie.
Mahdi
Nie sądzę, że jest to bezpośrednio problem, który próbuje rozwiązać responsywny projekt. W większości przypadków celem tego jest zapewnienie jak najmniejszej ilości zasobów niezbędnych do pierwszego renderowania. Nadal zapewniłbyś responsywny projekt. Umieszczenie informacji w żądaniu nie zabrania elastycznego projektowania. Na przykład możesz użyć HTTP2, aby uzyskać właściwe obrazy dla srcset w pierwszej odpowiedzi. Nie możesz tego zrobić, jeśli nie masz informacji o rozmiarze rzutni, ale nadal możesz użyć srcset, aby zachować szybkość reakcji.
monokrom
2

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

Calphool
źródło
1

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) {
        ...
Ame Nomade
źródło
To jedyna poprawna odpowiedź teraz.
marvindanig
1

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.

JacquesB
źródło