Усі перелічені вище відповіді, які використовують max-device-widthабо max-device-heightдля медіа-запитів, страждають від дуже сильних помилок: вони також націлені на безліч інших популярних мобільних пристроїв (можливо, небажаних і ніколи не перевірених, або які потраплять на ринок у майбутньому).
Цей запит буде працювати для будь-якого пристрою, який має менший екран , і, ймовірно, ваш дизайн буде порушений.
У поєднанні з аналогічними медіа-запитами, що стосуються конкретних пристроїв (для HTC, Samsung, IPod, Nexus ...), ця практика спричинить запуск бомби. Для дебютування ця ідея може зробити ваш CSS неконтрольованим спагетті. Ніколи не можна тестувати всі можливі пристрої.
Зауважте, що єдиний медіа-запит, який завжди націлений на IPhone5 та нічого іншого , це:
/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px)
and (device-width : 320px)
and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
/*IPhone 5 only CSS here*/
}
Зауважте, що тут перевіряється точна ширина та висота, а не максимальна ширина.
Тепер, яке рішення? Якщо ви хочете написати веб-сторінку, яка буде добре виглядати на всіх можливих пристроях, найкращою практикою є використання деградації
/ * шаблон деградації, ми перевіряємо лише ширину екрана, це зміниться, перетворюючись з портретного на пейзаж * /
/*css for desktops here*/
@media (max-device-width: 1024px) {
/*IPad portrait AND netbooks, AND anything with smaller screen*/
/*make the design flexible if possible */
/*Structure your code thinking about all devices that go below*/
}
@media (max-device-width: 640px) {
/*Iphone portrait and smaller*/
}
@media (max-device-width: 540px) {
/*Smaller and smaller...*/
}
@media (max-device-width: 320px) {
/*IPhone portrait and smaller. You can probably stop on 320px*/
}
Якщо більше 30% відвідувачів вашого веб-сайту приходять з мобільного телефону, переверніть цю схему догори дном, забезпечивши підхід для мобільних пристроїв. Використовуйте min-device-widthв цьому випадку. Це пришвидшить надання веб-сторінок для мобільних браузерів.