Я хочу изменить CSS своей веб-страницы для веб-браузеров, работающих на мобильных телефонах, таких как iPhone и Android. Я пробовал что-то подобное в файле CSS:
@media handheld {
body {
color: red;
}
}
Но, похоже, это не имеет никакого эффекта, по крайней мере, на iPhone. Как я могу написать свой CSS, чтобы он работал по-другому на iPhone и т. Д., В идеале без использования javascript?
Вы можете использовать запросы @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 (ссылка на которую приведена выше) дает краткий обзор некоторых из них.
Хм, похоже, многие новые мобильные устройства имеют более высокое разрешение (например, droid X — 854x480). Есть ли способ их обнаружить? Я не думаю, что они обрабатываются с этим запросом.
Я не могу сказать наверняка, так как у меня нет доступа к этим устройствам, кроме другого Статья List Apart: Адаптивный веб-дизайн отмечает, что:
К счастью, 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 для медиа-запросов.
handheld, если верхнее устройство портативное?
- person vintproykt; 28.02.2019
На этом сайте есть несколько других полезных мультимедийных запросов. в таргетинге на 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, но часто мы говорим о представлении альтернативных макетов в наши дни, размер которых соответствует используемым устройствам.
@media handheld относится только к тем древним крошечным сотовым телефонам с прото-html прошлых лет, которые даже не могли отображать веб-страницы. ePUB, MOBI, Tablet, сообщество поставщиков — все решительно заявили: «Черт возьми, мы не @media handheld устройства!» потому что они справедливо опасались, что это навсегда приведет их на ничейную землю, подчиненную «настоящим» веб-страницам.
С сегодняшними небольшими устройствами с дисплеями очень высокого разрешения у нас все еще нет хорошего способа сказать HTML, как отображать вещи «правильно» на больших дисплеях с относительно низким разрешением по сравнению с маленькими дисплеями с очень высоким разрешением. И как сертифицированный старый пердун, мои глаза хотели бы напомнить вам, что нет, ответ заключается не только в том, чтобы сделать все, включая шрифты, в 2 раза меньше.
ANOTHER_OPINIONATED_CONSTANT_MAX_RESOLUTION_VALUE_FROM_ANOTHER_ARTICLE... прошу прощения за капс)
- person vintproykt; 28.02.2019
Нет, ни iPhone, ни Android-браузеры не поддерживают CSS @media handheld.
Посмотрите на использование медиа-запроса «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;
}
