Css handheld media type iphone

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

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

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

ОТВЕТЫ

Ответ 1

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

Эта конкретная версия предназначена для 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-запросам, но, как уже отмечалось, я не могу сказать с уверенностью.

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

Ответ 2

Из этого сайта есть несколько других медиа-запросов, которые полезны при настройке iPhone/Android-телефонов:

Мне удалось успешно использовать мультимедийный запрос 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:

После запуска grunt и т.д. на SCSS это приведет к тому, что CSS выглядит так:

Источник

2.26. CSS3-медиазапросы

В 2001 году в HTML4 и CSS2 была введена поддержка аппаратно-зависимых таблиц стилей, позволившая создавать стили и таблицы стилей для определенных типов устройств. В качестве медиа-типов были определены следующие: aural , braille , handheld , print , projection , screen , tty , tv . Таким образом, браузер применял таблицу стилей только в случае, когда активизировался данный тип устройства.

Кроме того, было введено ключевое слово all , которое использовалось, чтобы указать, что таблица стилей применяется ко всем типам носителей.

В HTML4 медиа-запрос записывался следующим образом:

Внутри таблицы стилей также можно было объявить, что блоки объявлений должны применяться к определенным типам носителей:

Предусматривая возможность введения новых значений и значений с параметрами в будущем, для браузеров была реализована поддержка значений атрибута медиа-носителя, указанных следующим образом:

Текущий синтаксис HTML5 и CSS3 напрямую ссылается на первую спецификацию Media Queries, обновляя правила для HTML. Также был расширен список характеристик медиа-носителей.

Медиазапросы, характеристики устройств и разрешения экрана

Поддержка браузерами

IE: 9.0 (кроме вложенных медиазапросов)
Edge: 12.0
Firefox: 3.5
Chrome: 26.0
Safari: 6.1
Opera: 10.1
iOS Safari: 7.1
Android: 4.4
Chrome for Android: 55.0

1. Что такое медиа-запрос

В общем случае медиа-запрос состоит из ключевого слова, описывающего тип устройства (необязательный параметр) и выражения, проверяющего характеристики данного устройства. Из всех характеристик чаще всего проверяется ширина устройства width . Медиа-запрос является логическим выражением, которое возвращает истину или ложь.

Медиа-запросы могут быть добавлены следующими способами:

1) С помощью HTML:

2) С помощью правила @import внутри элемента

4) Внутри таблицы стилей style.css:

Таблица стилей, прикрепленная через тег
, будет загружаться вместе с документом, даже если её медиа-запрос вернет ложь.

Для поддержки медиа-запросов в старых браузерах можно воспользоваться JavaScript-библиотекой css3-mediaqueries.js , доступную по адресу https://code.google.com/archive/p/css3-mediaqueries-js/.

2. Логические операторы

С помощью логических операторов можно создавать комбинированные медиазапросы, в которых будет проверяться соответствие нескольким условиям.

2.1. Оператор and

Оператор and связывает друг с другом разные условия:

Стили этого запроса будут применяться только для экранных устройств с шириной области просмотра не более 600px .

Стили этого запроса будут применяться для всех устройств при ширине области просмотра от 600px до 800px включительно.

Правило @media all and (max-width: 600px) <. >равнозначно правилу @media (max-width: 600px) <. >.

2.2. Оператор запятая

Оператор запятая работает по аналогии с логическим оператором or .

В данном случае CSS-стили, заключенные в фигурные скобки, сработают только для экранных или проекционных устройств.

2.3. Оператор not

Оператор not позволяет сработать медиазапросу в противоположном случае. Ключевое слово not добавляется в начало медиазапроса и применяется ко всему запросу целиком, т.е. запрос

будет эквивалентен запросу

Если медиазапрос составлен с использованием оператора запятая, то отрицание будет распространяться только на ту часть, которая идет до запятой, т.е. запрос

будет эквивалентен запросу

2.4. Оператор only

Оператор only используется, чтобы скрыть стили от старых браузеров (поддерживающих синтаксис медиа-запросов CSS2).

Эти браузеры ожидают список медиа-типов, разделённых запятыми. И, согласно спецификации, они должны отсекать каждое значение непосредственно перед первым неалфавитно-цифровым символом, который не является дефисом. Таким образом, старый браузер должен интерпретировать предыдущий пример как media=»only» . Поскольку данного типа медиа-типа не существует, то и таблицы стилей будут игнорироваться.

3. Тип носителя

Тип носителя представляет собой тип устройства, например, принтеры, экраны.

Таблица 1. Тип носителя

Значение	Описание
all	Подходит для всех типов устройств.
print	Предназначен для страничных материалов и документов, просматриваемых на экране в режиме предварительного просмотра печати.
screen	Предназначен в первую очередь для экранов цветных компьютерных мониторов.
speech	Предназначен для синтезаторов речи.

CSS2.1 и Media Queries 3 определяли несколько дополнительных типов, таких как aural , braille , embossed , projection , tty , tv и handheld , но они приняты устаревшими в Media Queries 4 и не будут использоваться.

4. Характеристики носителя

К характеристикам медианосителя относятся проверяемые параметры устройства. Значения, которые используются при задании характеристик, являются контрольными точками.

Таблица 2. Характеристики носителя

Параметр	Описание
width	Проверяет ширину области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (width: 800px) . Обычно для проверки используются минимальные и максимальные значения ширины. min-width применяет правило если ширина области просмотра больше значения, указанного в запросе, max-width — ширина области просмотра меньше значения, указанного в запросе.
height	Проверяет высоту области просмотра. Значения задаются в единицах длины, px , em и т.д., например, (height: 500px) . Обычно для проверки используются минимальные и максимальные значения высоты. min-height применяет правило если высота области просмотра больше значения, указанного в запросе, max-height — высота области просмотра которого меньше значения, указанного в запросе.
aspect-ratio	Проверяет соотношение ширины к высоте области просмотра. Широкоэкранный дисплей с соотношением сторон 16:9 может быть помечен как (aspect-ratio: 16/9) . min-aspect-ratio проверяет минимальное соотношение, max-aspect-ratio — максимальное соотношение ширины к высоте области просмотра.
orientation	Проверяет ориентацию области просмотра. Принимает два значения: (orientation: portrait) и (orientation: landscape) .
resolution	Проверяет разрешение экрана (количество пикселей). Значения также могут проверять количество точек на дюйм (dpi) или количество точек на сантиметр (dpcm), например, (resolution: 300dpi) . min-resolution проверяет минимальное разрешение экрана, max-resolution — максимальное.

grid Проверяет, относится ли определенное устройство к устройствам с фиксированным размером символов. Размеры букв на таком устройстве занимают одинаковую ширину и высоту и выстраиваются по заданной сетке. К подобным устройствам можно отнести терминалы, а также телефоны, которые поддерживают только один шрифт.

—>

color Проверяет количество бит на каждый из цветовых компонентов устройства вывода. Например, (min-color: 4) означает, что экран конкретного устройства должен иметь 4-битную глубину цвета.
min-color проверяет минимальное количество бит, max-color — максимальное количество бит. color-index Проверяет количество записей в таблице подстановки цветов. В качестве значения указывается положительное число, например, (color-index: 256) .
min-color-index проверяет минимальное количество записей, max-color-index — максимальное количество записей. monochrome Проверяет количество битов на пиксель монохромного устройства. Значение задается целым положительным числом, например, (min-monochrome: 8) .
min-monochrome проверяет минимальное количество битов, max-monochrome — максимальное количество битов. -webkit-device-pixel-ratio Задаёт количество физических пикселей устройства на каждый CSS-пиксель.

device-width , device-height , device-aspect-ratio являются устаревшими API, они удалены из Media Queries Level 4.

5. Метатег viewport

Для управления разметкой в мобильных браузерах используется метатег viewport . Изначально данный тег был представлен разработчиками Apple для браузера Safari на iOS. Мобильные браузеры отображают страницы в виртуальном окне просмотра, которое обычно шире, чем экран устройства. С помощью метатега viewport можно контролировать размер окна просмотра и масштаб.

Страницы, адаптированные для просмотра на разных типах устройств, должны содержать в разделе метатег viewport .

Свойство width определяет виртуальную ширину окна просмотра, значение device-width — физическую ширину устройства. Другими словами, width отражает значение document.documentElement.clientWidth , а device-width — screen.width .

При первой загрузке страницы свойство initial-scale управляет начальным уровнем масштабирования, initial-scale=1 означает, что 1 пиксель окна просмотра = 1 пиксель CSS.

Рис. 2. Разница между width и device-width

6. На какие размеры экрана нужно ориентироваться

При составлении медиазапросов нужно ориентироваться на так называемые переломные (контрольные) точки дизайна, т.е. такие значения ширины области просмотра, в которых дизайн сайта существенно меняется, например, появляется горизонтальная полоса прокрутки. Чтобы определить эти точки, нужно открыть сайт в браузере и постепенно уменьшать область просмотра.

Чтобы проверить, как выглядит ваш сайт на разных устройствах, можно воспользоваться сервисом Responsive design testing for the masses.

7. Стратегии использования медиа-запросов

Для создания дизайна, позволяющего лучшим образом отображать сайт на различных устройствах, используют общие стратегии медиа-запросов:
1) Уменьшение количества колонок (столбцов) и постепенная отмена обтекания для мобильных устройств.
2) Использование свойства max-width вместо width при задании ширины блока-контейнера.
3) Уменьшение полей и отступов на мобильных устройствах (например, нижних отступов между заголовком и текстом, левого отступа для списков и т.п.).
4) Уменьшение размеров шрифтов для мобильных устройств.
5) Превращение линейных навигационных меню в раскрывающиеся.
6) Скрытие второстепенного содержимого на мобильных устройствах с помощью display: none .
7) Подключение фоновых изображений уменьшенных размеров.

Источник