Медиа-запрос CSS предназначен только для устройств iOS

Question

Существует ли запрос @media, предназначенный только для работающих под управлением iOS устройств?

пример:

@media (min-device-width:320px) and (max-device-width:768px) {
#nav {
yada:yada;
}
}

это также изменит поведение страницы на устройствах Android с этими перспективами ширины? или я ошибаюсь с этим последним

Answer 1

Да, ты можешь.

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */ 
}

YMMV.

Это работает, потому что только Safari Mobile реализует -webkit-overflow-scrolling: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling

Обратите внимание, что @supports не работает в IE. IE пропустит оба вышеперечисленных @support блоки выше. Чтобы узнать больше, смотрите https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/. Рекомендуется не использовать @supports not из-за этого.

Answer 2

Я не знаю о таргетинге на iOS в целом, но конкретно о таргетинге на iOS Safari:

@supports (-webkit-touch-callout: none) {
   /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
   /* CSS for other than iOS devices */ 
}

Видимо с iOS 13 -webkit-overflow-scrolling больше не отвечает на @supports, но -webkit-touch-calloutвсе еще делает. Конечно, это может измениться в будущем...

Answer 3

Как уже упоминалось выше, короткий ответ - нет. Но мне нужно нечто подобное в приложении, над которым я сейчас работаю, но области, где CSS должен отличаться, ограничены очень конкретными областями страницы.

Если вы похожи на меня и вам не нужно обслуживать совершенно другую таблицу стилей, другим вариантом будет обнаружение устройства под управлением iOS способом, описанным в ответе на этот вопрос: определить, является ли устройство iOS

После того, как вы обнаружили устройство iOS, вы можете добавить класс в область, на которую вы нацеливаетесь, используя Javascript (например, document.getElementsByTagName("yourElementHere")[0].setAttribute("class", "iOS-device");, jQuery, PHP или что-то еще, и стилизуйте этот класс соответствующим образом, используя уже существующую таблицу стилей.

.iOS-device {
      style-you-want-to-set: yada;
}

Answer 4

Краткий ответ Нет. CSS не является специфическим для брендов.

Ниже приведены статьи для реализации для iOS с использованием только медиа.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://stephen.io/mediaqueries/

Фактически вы можете использовать PHP, Javascript для обнаружения браузера iOS и в соответствии с этим вы можете вызвать файл CSS. Например

http://www.kevinleary.net/php-detect-ios-mobile-users/