max-width — це ширина цільової області відображення, напр. браузер; max-device-width є ширина всієї області візуалізації пристрою, тобто фактичний екран пристрою.
Визначення та використання. Властивість max-width визначає максимальну ширину елемента. Якщо вміст більший за максимальну ширину, він автоматично змінить висоту елемента. Якщо вміст менший за максимальну ширину, властивість max-width не впливає.
max-device-width базується на рідній роздільній здатності телефону, тоді як max-width базується на загальному доступному просторі, з яким зазвичай має працювати браузер 640 пікселів максимальна ширина стандартного смартфона в альбомній орієнтації.
Ширина=ширина пристрою встановлює ширину сторінки відповідно до ширини екрана пристрою (який буде відрізнятися залежно від пристрою). Частина initial-scale=1.0 встановлює початковий рівень масштабування, коли сторінка вперше завантажується браузером.
Функція ширини пристрою вказується як значення <length>. Це функція діапазону, тобто ви також можете використовувати префікс min-device-width і max-device-width варіантів для запиту мінімальних і максимальних значень відповідно.