Настройка CSS для мобильных устройств: понимание ограничений @media портативных устройств

При попытке настроить CSS специально для мобильных браузеров, таких как iPhone и Android, важно учитывать ограничения портативного устройства @media. Хотя этот тип медиа-запроса использовался и раньше, он не поддерживается повсеместно на мобильных устройствах, особенно на устройствах с расширенными возможностями отображения.

Для достижения желаемого эффекта рассмотрите альтернативные подходы:

Использование @media Screen Queries

Вместо @media Handheld используйте экранные запросы @media. Эти запросы позволяют ориентировать устройства на основе конкретных характеристик экрана, таких как разрешение и ширина устройства. Например, чтобы стилизовать веб-страницу для iPhone:

@media screen and (max-device-width: 480px) {
  body {
    color: red;
  }
}

Использование запросов функций CSS

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

@supports (media) {
  /* Styles to be applied if media queries are supported */
}

Нацеливание на разрешение устройства

Чтобы настроить таргетинг на устройства с определенным разрешением, запросы @media можно комбинировать с функцией разрешения мультимедиа:

@media screen and (max-device-width: 480px) and (resolution: 163dpi) {
  body {
    color: blue;
  }
}

Дополнительные ресурсы

• [Рекомендация W3C для медиа-запросов](https://www.w3.org/TR/css3-mediaqueries/)
• [Разработчик Apple Mobile Webkit Руководство](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/GettingStarted/GettingStarted.html)
• [Раздельный список: проектирование для нескольких видовых экранов](https: //alistapart.com/article/viewports)