Я хочу изменить свою веб-страницу CSS для веб-браузеров, работающих на мобильных телефонах, таких как iPhone и Android. Я пробовал что-то подобное в файле CSS:
@media handheld {
body {
color: red;
}
}
Но это, похоже, не имеет никакого эффекта, по крайней мере, на iPhone. Как я могу написать свой CSS для работы по-разному на iPhone и т.д., В идеале без использования javascript?
Вы можете использовать @медиа-запросы:
<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 для медиа-запросов.
Из этого сайта есть несколько других медиа-запросов, которые полезны при настройке 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, но много раз мы говорим о представлении альтернативных макетов в эти дни, соответствующих размерам для используемых устройств.
@media handheld относится только к тем древним крошечным прото-html-сотовым телефонам за прошедшие годы, которые даже не могли отображать веб-страницы. В ePUB, MOBI, планшетах, сообщества продавцов все подчеркнуто "H * ck no, мы не @media handheld устройства!" потому что они были правильно обеспокоены тем, что это наведет их навсегда в ничейной земле, подчиняющейся "реальным" веб-страницам.
С сегодняшними маленькими устройствами с дисплеями с очень высоким разрешением у нас пока нет хорошего способа сказать HTML, как отображать вещи "правильно" на больших дисплеях с относительно низким разрешением и малыми дисплеями с очень высоким разрешением. И, как сертифицированный старый пердит, мои глаза хотели бы напомнить вам, что нет, ответ заключается не только в том, чтобы сделать все, в том числе и на 2 раза меньше шрифтов.
Нет, ни браузеры iPhone, ни Android не поддерживают CSS @media handheld.
Посмотрите на использование запроса на перенос данных.
Поместите это в свой файл 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;
}