TL; DR
Якщо ви створюєте адаптивний веб-сайт, використовуйте min-width/ max-widthу своїх медіа-запитах, а не min-device-width/ max-device-widthдля того, щоб націлити ширший діапазон розмірів екрану.
Відповідно до проекту специфікації медіа-запитів рівня 4 за 2018 рік , device-widthфункція медіа застаріла . Він буде зберігатися для зворотної сумісності, але його слід уникати.
8. Додаток А: Застарілі функції медіа
Для запиту щодо розміру області перегляду (або вікна сторінки на носії сторінки) слід використовувати функції width, heightа також aspect-ratioносій, а не device-width, device-heightі device-aspect-ratio, які стосуються фізичного розміру пристрою, незалежно від того, скільки місця доступно для документ, що викладається. В device-*особливості ЗМІ також іноді використовується в якості проксі - сервера для виявлення мобільних пристроїв. Натомість авторам слід використовувати медіа-функції, які краще відображають аспект пристрою, який вони намагаються оформити.
Як допоміжну примітку, не забудьте вказати метатег області перегляду в <head>розділі вашого документа:
<meta name="viewport" content="width=device-width, initial-scale=1">
Пояснення
Через всі різні можливі роздільну здатність екрану та щільність пікселів, які може мати певний пристрій, піксель не є пікселем, оскільки слід враховувати декілька речей (масштабування, щільність пікселів, роздільна здатність та розмір екрану, орієнтація пристрою, співвідношення сторін тощо). ..). У цьому випадку піксель насправді називається "оптичним еталонним блоком", а не фізичним апаратним пікселем.
На щастя, ви можете вказати мета-тег області перегляду у <head>розділі вашого документа, щоб контролювати ширину та масштабування області перегляду браузера. Якщо цей тег має contentзначення width=device-width, ширина екрана буде відповідати незалежним від пристрою пікселям і гарантуватиме, що всі різні пристрої повинні масштабуватися та поводитися послідовно.
<meta name="viewport" content="width=device-width, initial-scale=1">
Що стосується медіа-запитів, вам, ймовірно, доведеться скоріше використовувати, max-widthа не max-device-width, оскільки max-widthбуде націлено на область перегляду (поточне вікно браузера), тоді як max-device-widthбуде націлено на фактичний розмір / роздільну здатність пристрою.
Іншими словами, якщо ви використовуєте max-device-width, ви не побачите різних медіа-запитів, застосованих під час зміни розміру браузера на настільному ПК, оскільки, на відміну від цього max-width, враховується лише фактичний повноекранний розмір пристрою; не поточний розмір вікна браузера.
Це робить величезну різницю, якщо ви намагаєтеся створити адаптивний макет, оскільки сайт не реагує на зміну розміру браузера. Крім того, якщо ви використовуєте max-device-widthмедіа-запити, які ви використовуєте для націлювання на пристрої з меншими екранами, це не застосовуватиметься до робочих столів навіть при зменшенні розміру вікна браузера, щоб він відповідав зазначеному меншому розміру екрана.
Станом на 2018 рік, останній проект специфікації медіа-запиту фактично застарів device-widthмедіа-функцію, тому її слід уникати.
Крім того, ця стаття про розробників Google настійно не рекомендує використовувати max-device-width:
Розробники Google - Основи Інтернету - Адаптивні CSS-медіа-запити
Також можна створювати запити на основі *-device-width; хоча така практика настійно не рекомендується .
Різниця незначна, але дуже важлива: min-widthзалежить від розміру вікна браузера, тоді min-device-widthяк від розміру екрану. На жаль, деякі браузери, включаючи застарілий браузер Android, можуть неправильно повідомляти про ширину пристрою, а замість цього повідомляють про розмір екрану в пікселях пристрою замість очікуваної ширини області перегляду.
Крім того, використання *-device-widthможе запобігти адаптації вмісту на робочих столах чи інших пристроях, що дозволяють змінювати розмір вікон, оскільки запит базується на фактичному розмірі пристрою, а не на розмірі вікна браузера.
Подальше читання: