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

Есть ли запрос @media для таргетинга только на устройства под управлением iOS?

Например:

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

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

Ответы

Ответ 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 из - за этого.

Ответ 2

Краткий ответ №. CSS не относится к брендам.

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

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

http://stephen.io/mediaqueries/

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

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

Ответ 3

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

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

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

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