Intereting Posts
Проверка, работает ли приложение Android в фоновом режиме NullPointerException в HardwareRenderer Более эффективный способ обновления пользовательского интерфейса от службы, чем намерения? Блокировка WiFi не работает, как предотвратить энергосбережение Wi-Fi? Как отслеживать каждый статус отправленного SMS? Как сделать свечение текста? Ручная установка файлов на SD-карту эмулятора Android Отправлять широковещательный UDP, но не получать его на других устройствах Android Плагин Genymotion не может отображаться в Eclipse Привязать к сервису из нового контекста для изменения конфигурации или привязки из контекста приложения? Как передать двойное значение текстовому полю в Android Как импортировать файл .aar в Android Studio 1.1.0 и использовать его в моем коде Android push-сообщение без gcm возможно? Как сделать считыватель QR-кода Добавление учетной записи через менеджера аккаунта

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

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

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

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

Solutions Collecting From Web of "Поддерживают ли браузеры iPhone / Android браузер CSS @media?"

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

 <link rel="stylesheet" href="path/to/iphone.css" media="only screen and (max-device-width:480px)"/> 

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

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


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

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

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

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

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

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

 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" /> 

Дальнейшее чтение: Рекомендация кандидата 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 Потому что они были правильно обеспокоены тем, что это наведет их навсегда в ничейной земле, подчиняющейся «реальным» веб-страницам.

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

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