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

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

47 голосов
/ 08 октября 2010

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

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

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

Ответы [ 5 ]

35 голосов
/ 08 октября 2010

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

<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 - 854x480).Есть ли способ обнаружить это?Я не думаю, что они обрабатываются с помощью этого запроса.

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

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

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

Чтобы указать разрешение устройства, существуетявляется примером: 

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

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

29 голосов
/ 06 января 2011

С этого сайта есть несколько других медиа-запросов, которые полезны при таргетинге на 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, хотя мне пришлось настроить ширину до 800px, а не 480 в списке. Для iPhone 4 -webkit-min-device-pixel-ratio работает для iPhone4 (max-device-width: 480px нет, я предполагаю, что он будет нацелен на iPhone3, но не было ни одного удобного для тестирования). 1006 *

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

19 голосов
/ 01 ноября 2012

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

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

5 голосов
/ 02 февраля 2017

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

0 голосов
/ 03 октября 2017

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

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

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