Поддерживают ли браузеры iPhone / Android браузер CSS @media?

Я хочу изменить веб-страницу CSS для веб-браузеров, работающих на мобильных телефонах, таких как iPhone и Android. Я пробовал что-то вроде этого в файле CSS:

@media handheld { body { color: red; } } 

Но, похоже, это не имеет никакого эффекта, по крайней мере, на iPhone. Как я могу написать свой CSS для работы по-разному на iPhone и т. Д., В идеале без использования javascript?

Вы можете использовать запросы @media :

  

Эта конкретная версия будет нацелена на iPhone (и любое другое устройство с экраном max-device-width 480px .

Apple, для iPhone, хотя это из памяти, поэтому я не могу быть полностью уверен в ее точности, решил не обращать внимания на использование handheld или mobile таблиц стилей, поскольку он и другие устройства iOS были способны оказывать css более или менее наравне с настольными браузерами, через Safari. Для других устройств я не уверен, насколько они верны, хотя статья A List Apart (связанная с выше) дает краткий обзор некоторых.


Отредактировано в ответ на комментарий от @Colen:

Хм, похоже, что многие новые мобильные устройства имеют более высокое разрешение (например, дроид X – 854×480). Есть ли способ обнаружить их? Я не думаю, что эти вопросы обрабатываются с помощью этого запроса.

Я не могу сказать наверняка, так как у меня нет доступа к этим устройствам, однако другая статья A List Apart Article: Отзывчивый веб-дизайн отмечает, что:

К счастью, W3C создал медиа-запросы как часть спецификации CSS3, улучшив promise типов медиа. Медиа-запрос позволяет нам ориентировать не только определенные classы устройств, но и фактически проверять физические характеристики устройства, оказывающего нашу работу. Например, после недавнего роста мобильного WebKit, медиа-запросы стали популярным методом на стороне клиента для доставки индивидуальной таблицы стилей на iPhone, телефоны Android и т. Д.

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

Для целевого разрешения устройства приведен пример:

  

Дальнейшее чтение: Рекомендация кандидата W3 для медиа-запросов .

С этого сайта есть несколько других медиа-запросов, которые полезны при настройке iPhone / Android-телефонов:

  // target mobile devices @media only screen and (max-device-width: 480px) { body { max-width: 100%; } } // recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display @media only screen and (-webkit-min-device-pixel-ratio: 2) { // CSS goes here } // should technically achieve a similar result to the above query, // targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) @media only screen and (min-resolution: 300dpi) { // CSS goes here } 

Я смог успешно использовать мультимедийный запрос max-device-width для успешной целевой Android-телефонии, хотя мне пришлось регулировать ширину до 800 пикселей, а не 480. Для iPhone 4 соотношение -webkit-min-device-pixel-ratio работало, чтобы нацелиться на iPhone4 (max-device-width: 480px этого не делал, я полагаю, что это будет нацелено на iPhone3, но не было бы удобно тестировать).

Я вижу, что это становится довольно беспорядочным, но если вам нужно поддерживать множество устройств и иметь пользовательский CSS для каждого из них, пока они поддерживают медиа-запросы, это выглядит так, как можно сделать то, что вам нужно, чтобы настроить каждую платформу , И да, я бы сначала сформулировал стандарты, так что столько CSS было resuable, но много раз мы говорим о представлении альтернативных макетов в эти дни, соответствующих размерам для используемых устройств.

@media handheld относится только к тем древним крошечным прото-html-сотовым телефонам с прошлых лет, которые не могли даже реально отображать веб-страницы. В ePUB, MOBI, планшетах, сообщества продавцов все подчеркнуто «H * ck no, мы не являемся @media handheld устройствами @media handheld !» потому что они были правильно обеспокоены тем, что это наведет их навсегда в ничейной земле, подчиняющейся «реальным» веб-страницам.

С сегодняшними маленькими устройствами с дисплеями с очень высоким разрешением мы по-прежнему не имеем возможности рассказать HTML, как отображать вещи «правильно» на больших дисплеях с относительно низким разрешением и малыми дисплеями с очень высоким разрешением. И, как сертифицированный старый пердит, мои глаза хотели бы напомнить вам, что нет, ответ заключается не только в том, чтобы сделать все, в том числе и в шрифтах размером 2X.

Нет, ни браузеры iPhone, ни Android не поддерживают @media handheld CSS @media handheld .

Посмотрите на использование «зависания» медиа-запроса.

Поместите это в свой файл SCSS:

 // At this point the CSS would target screens above 990px - but only // if they support hover (ie laptops, PC's etc). $point-at-which-use-large-screens: (min-width 990px) (hover hover); .some-class-you-want-to-target { // Some CSS to only apply to larger screens with mouse available. @include breakpoint($point-at-which-use-large-screens) { color: red; } } 

После запуска grunt и т. Д. На SCSS это приведет к тому, что CSS выглядит так:

 @media (min-width: 991px) and (hover: hover) { color:red; } 
Давайте будем гением компьютера.