Почему заголовки HTTP не включают разрешение устройства, плотность пикселей и т. Д.?

10

В настоящее время я разрабатываю адаптивный веб-сайт с медиа-запросами CSS. Было бы намного проще, если бы сервер возвращал разные HTML / CSS для каждого окна просмотра.
Мне было интересно, почему клиент не может включить информацию о своем окне просмотра при запросе файла HTML. Такое поведение уже распространено для возврата веб-сайтов на правильном языке с использованием Accept-Languageзаголовка.

http eliocs
источник
Вы можете отправить его через JavaScript, а затем загрузить файл CSS. Я думаю, что проблема в том, что разрешение может измениться ...
Knerd
Это не RWD. Эти HTML / CSS не дадут вам никакого адаптивного эффекта, если вы не обновите страницу.
Махди
Разрешение, стили шрифта, размеры шрифта, тип браузера, размер экрана - все это изменчиво с устройства на устройство, вы задаете вопрос о типе web 1.0, либо переходите на что-то динамическое, например ASP, PHP, добавление Javascript и т. Д., Либо доволен селектором средств массовой информации, который дает вам HTML.
Джефф Лангемайер
1
Что, если программное обеспечение без какой-либо возможности отображения изображений запрашивает ваш html вместо браузера? Например, программа для чтения с экрана? Или браузерный терминал?
Джек,

Ответы:

18

Короче говоря, это не было то, как Wild Wild Web был разработан для работы.

Первоначальный дизайн заключался в том, что HTML-код подсказывал браузеру о документе. Какие биты подчеркнуть, куда идти, чтобы получить файлы изображений. Решения о шрифте (а также о том, какой размер) были заданы браузером и настройками локальной конфигурации.

Да, я знаю, что мир движется дальше, и теперь веб-дизайнеры рассчитывают контролировать каждый пиксель, который увидят наши глаза. В прошлом это была задача рабочего стола.

Майкл Шоу
источник
3
Я бы сказал, что даже сегодня это должна быть работа устройства. Установите несколько различных минимальных наборов CSS и позвольте устройствам справиться с этим оттуда.
Джефф Лангемайер
@JeffLangemeier Полностью согласен. Несмотря на то, что этот ответ по сути правильный, он вовсе не говорит о RWD.
Махди
1
Возможно,
пришло время изменить
@Mahdi Я действительно не думаю, что вопрос был о RWD по сути, так или иначе, это был человек, пытающийся изобрести колесо и удивляющийся, почему в спецификации HTML нет <произвольной личной потребности>.
Джефф Лангемайер
@eliocs есть, он называется html и CSS. HTML это структура, а CSS это дизайн. Или, если вы хотите полностью отделить контент от своего дизайна, перейдите на динамическую систему, такую ​​как PHP, django в python и т. Д.
Джефф Лангемайер,
8

Я думаю, что вы не совсем поняли идею адаптивного веб-дизайна . Обслуживание различных HTML / CSS / JS на основе клиентского веб-браузера уже давно, и я уверен, что некоторые веб-сайты все еще делают это - очень наглядный пример - старый способ обслуживания мобильных устройств. тема для сайта

По моему мнению, вам не хватает того, что в вашем сценарии, если пользователь изменит порт просмотра с портретного на ландшафтный, то вы не получите никакого адаптивного ответа, если не обновите страницу. То же действие требуется, если вы измените размер окна веб-браузера или измените масштаб по умолчанию. Также элемент на странице может реагировать на другие элементы. Так, например, если вы скроете боковую панель справа, основной контент будет реагировать на изменения. Опять же, это будет невозможно, если вы не обновите страницу.

Также HTTP-запросы предназначены не только для сервера всей веб-страницы. Во многих случаях вы отправляете запрос на отправку / получение простых данных, файлов, изображений и т. Д., Которые им не нужны для переноса метаинформации порта просмотра, и дополнительные затраты в таких масштабах, как Интернет, будут весьма значительными ,

мессия
источник
Накладные расходы были бы полезно служить изображения тоже, представьте себе , вы возвратили изображения меньшего разрешения для мобильных устройств. Я согласен с тем, что область просмотра изменяется после загрузки страницы, и это мой недостаток.
eliocs
@eliocs Вы правы, для изображений на самом деле это важно. Спасибо за исправление.
Махди
Я не думаю, что это та проблема, которую пытается решить адаптивный дизайн. В большинстве случаев цель этого состоит в том, чтобы обеспечить наименьшее количество ресурсов, необходимых для первого рендеринга. Вы бы все равно предоставили адаптивный дизайн поверх этого. Наличие информации в запросе не запрещает адаптивный дизайн. Например, вы можете использовать HTTP2 для получения правильных изображений для srcset в первом ответе. Вы не можете сделать это, если у вас нет информации о размере области просмотра, но вы все равно можете использовать srcset, чтобы все отвечало.
монокром
2

Вы уверены , что делаете адаптивный дизайн? Адаптивный дизайн - это технически сочетание гибкого дизайна и медиазапросов.

Fluid design решает для вас 90% проблем с областью просмотра, если вы хорошо разбираетесь в том, как вы это делаете. Медиа-запросы дают вам остальные 10%, изменяя характеристики сетки на основе текущих измерений.

Если вы пытаетесь сделать только плавный (процентное соотношение повсюду, относительный размер по всему, ничего не указано в пикселях и т. Д.), Вы столкнетесь с проблемой того, что делать, когда область просмотра резко отличается по размеру (как ландшафтный вид рабочего стола по сравнению с мобильный портретный вид). Некоторые вещи просто не подходят, когда вы переходите с 2048 на 640 пикселей. Когда вы пытаетесь выполнять только медиа-запросы, вы получаете десятки и десятки разрывов медиа-запросов, и в этом случае вы в основном управляете своими CSS-классами. Ни один из подходов не подходит для RWD - вы должны объединить два, чтобы получить все.

Мой совет: создайте три или четыре разных «номинальных разрешения и ориентации» - таких как настольный ландшафт, iPad-портрет и альбомная ориентация, iPhone-портрет и альбомная ориентация - и относитесь к ним как к своим каркасам для работы. Затем настройте медиа-запросы на эти перерывы. Затем действительно усердно работайте, чтобы придерживаться этих нескольких перерывов, используя для этого плавные макеты - скорее всего, с какой-то сеткой CSS (есть десятки из них, предварительно собранные для вас, или вы можете свернуть свои собственные).

Calphool
источник
1

Если у вас есть динамический веб-сайт, который извлекает контент, код, подобный этому, поможет (в 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) {
    ...

Примечание. «Учетные данные» предназначены для файлов cookie сеанса.

Затем вы можете прочитать эти заголовки на стороне сервера, например (в 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
источник
Это единственный правильный ответ сейчас.
marvindanig
1

Это не будет работать по той простой причине, что пользователь может изменить размер окна браузера без перезагрузки страницы.

Адаптивный дизайн означает, что макет динамически изменяется в зависимости от размеров окна просмотра и других факторов. Таким образом, если дизайн фиксируется на стороне сервера на основе размера области просмотра во время запроса, он не будет реагировать, если размер окна изменяется пользователем. Вот почему медиа-запросы оцениваются на стороне клиента.

JacquesB
источник