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

Ответ 1

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

<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 (связанная с выше) дает краткий обзор некоторых из них.

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

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

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

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

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

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

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

Ответ 2

Из этого сайта есть несколько других медиа-запросов, которые полезны при настройке 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 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, но много раз мы говорим о представлении альтернативных макетов в эти дни, соответствующих размерам для используемых устройств.

Ответ 3

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

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

Ответ 4

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

Ответ 5

Посмотрите на использование запроса на перенос данных.

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

// At this point the CSS would target screens above 990px - but only
// if they support hover (i.e. laptops, PC 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;
}