Чому заголовки HTTP не включають роздільну здатність пристрою, щільність пікселів тощо?

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

Одним словом, Дика дика павутина не була спроектована для роботи.

Оригінальний дизайн полягав у тому, що HTML дав веб-переглядачу підказки про документ. Які біти підкреслити, куди звернутися, щоб отримати файли зображень. Рішення про шрифт (а також який розмір) було завданням браузера та локальних налаштувань конфігурації.

Так, я знаю, що світ пішов далі, і тепер веб-дизайнери розраховують контролювати кожен піксель, який бачать наші очі. У минулому минулому це було завданням робочого столу для цього.

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

На мою думку, вам не вистачає, що у вашому сценарії, якщо користувач змінить порт перегляду з портретного на пейзажний, ви не отримаєте жодної чуйної відповіді, якщо не оновите сторінку. Ця ж дія потрібна, якщо ви зміните розмір вікна веб-браузера або зміните масштаб за замовчуванням. Також елемент сторінки може реагувати на інші елементи. Так, якщо ви сховали бічну панель праворуч, наприклад, основний вміст відповість на зміну. Знову ж таки це стане неможливим, якщо ви не оновите сторінку.

Також HTTP-запити не просто розроблені для сервера всієї веб-сторінки. У багатьох випадках ви надсилаєте запит на надсилання / отримання простих даних, файлів, зображень тощо, які їм не потрібно переносити на метаінформацію порту перегляду та накладні витрати в такому масштабі, як Інтернет, буде багато, напевно .

Ви впевнені , що займаєтеся чуйним дизайном? Чуйний дизайн - це технічно поєднання дизайну рідини та медіа-запитів.

Дизайн рідини вирішує для вас 90% проблеми із вікном перегляду, якщо ви розумієте, як викладете речі. Медіа-запити отримують інші 10%, змінюючи характеристики сітки на основі поточних розмірів.

Якщо ви намагаєтеся робити лише рідину (відсотки скрізь, відносне розмір розміру на все, нічого не вказано в пікселях тощо), ви стикаєтеся з проблемою, що робити, коли вікно перегляду різко відрізняється за розмірами (наприклад, пейзажний вид на робочому столі проти перегляд мобільного портрета). Деякі речі просто не підходять, коли ви переходите від 2048px до 640px. Коли ви намагаєтеся робити лише медіа-запити, ви закінчуєте десятки і десятки перерв у медіа-запитах, і ви, в основному, керуєте своїми класами CSS у такому випадку. Жоден підхід не є адекватним для RWD - вам потрібно поєднати два, щоб отримати все.

Моя порада: створіть три або чотири різних "номінальних роздільних можливостей та орієнтацій" - таких як Настільний пейзаж, iPad-портрет і пейзаж, iPhone-портрет і пейзаж - і розглядайте їх як свої каркасні рамки, з яких можна працювати. Потім налаштуйте свої медіа-запити на ці перерви. Тоді попрацюйте дуже важко, щоб дотримуватися цих декількох перерв, використовуючи структурні схеми для цього - швидше за все, з CSS-сіткою якихось типів (є десятки з них, заздалегідь складені для вас, або ви можете скачати свої власні).

Якщо у вас є динамічний веб-сайт, який отримує вміст, такий код зробить трюк (у 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) {
        ...

Це не спрацює з тієї простої причини, що користувач може змінити розмір вікна браузера без перезавантаження сторінки.

Чуйний дизайн означає, що макет змінюється динамічно у відповідь на різні розміри вікна перегляду та інші фактори. Отже, якщо дизайн зафіксовано на стороні сервера на основі розміру вікна перегляду на момент запиту, воно не буде реагувати, якщо користувач змінить вікно. Ось чому медіа-запити оцінюються на стороні клієнта.