В спецификации CSS2.1 определены типы устройств (носителей), для которых применяются стили:
Но проблема в том, что современные мобильные браузеры: Opera Mobile 9.5+, Opera Mini 4+, Safari в айФоне по-умолчанию используют стили с типом screen. Вот как это объясняют разработчики Оперы:
Но что же делать, если создавая мобильную версию стилей вы не хотите пользователей в чем-то ограничивать функционально, а лишь пытаетесь изменить отображение? В этом нам помогут Media Queries.
Суть в том, что мы подключая какой-либо стиль можем помимо типа устройства добавить дополнительные условия его применения (ширину, высоту, ориентацию экрана, соотношение сторон, поддержка цветов). Полный список параметров и их применение можно найти здесь: Media Queries.
Свежие версии мобильных и настольных браузеров уже поддерживают Media Queries, несмотря на то, что документ находится еще в статусе Candidate Recommendation
Получаем такой вот результат:
Настольная версия
Печатная версия
Opera Mini
iPhone Safari
http://www.opera.com/mini/demo/
Отображение в Opera Mobile и iPhone Safari можно увидеть в настольных версиях этих браузеров просто уменьшив ширину окна (при ширине меньше 601 пиикселя они переключатся на мобильные стили). Кроме того в Опере можно принудительно использовать стили мобильной версии отметив в меню View -> Small Screen.
- all — для всех устройств;
- braille — для устройств, которые выводят информацию азбукой Брайля;
- embossed — для устройств печати азбукой Брайля;
- handheld — для мобильных устройств;
- print — для устройств печати и отображения в режиме предпросмотра печати в браузерах;
- projection — для презентаций (проекторов);
- screen — для экранов компьютеров;
- speech — для синтезаторов речи (в CSS 2 — aural);
- tty — для терминалов;
- tv — для телевизоров.
1. Теория
Главные причины, по которым нужно отдельно описывать стили для мобильных устройств следующие:- Ограничения разрешения экрана.
- Ограничения пропускной способности сети (низкая скорость и дороговизна трафика).
Но проблема в том, что современные мобильные браузеры: Opera Mobile 9.5+, Opera Mini 4+, Safari в айФоне по-умолчанию используют стили с типом screen. Вот как это объясняют разработчики Оперы:
Главная проблема стилей handheld в том, что вы не предоставляете пользователям возможнсть выбора контента, который доставляется на их телефон. В настоящее время телефоны гораздо мощнее нежели раньше, и немного обидно, когда веб-сайт видит, что вы заходите с мобильного устройства и предоставляет вам упрощенную версию, несмотря на то, что устройство легко поддерживает полноценную версию сайта.В общем в этом есть логика, последние версии мобильных браузеров по своим возможностям отображения ничем не уступают своим настольным собратьям.
Но что же делать, если создавая мобильную версию стилей вы не хотите пользователей в чем-то ограничивать функционально, а лишь пытаетесь изменить отображение? В этом нам помогут Media Queries.
Суть в том, что мы подключая какой-либо стиль можем помимо типа устройства добавить дополнительные условия его применения (ширину, высоту, ориентацию экрана, соотношение сторон, поддержка цветов). Полный список параметров и их применение можно найти здесь: Media Queries.
Свежие версии мобильных и настольных браузеров уже поддерживают Media Queries, несмотря на то, что документ находится еще в статусе Candidate Recommendation
2. Практика
Вот так выглядит определение стилей для настольной, мобильной и печатной версии сайта.<!—- подключаем стили для настольных браузеров Opera, Safari, Firefox, Chrome --> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen and (min-width: 601px)" /> <!—- подключаем стили для Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <![endif]--> <!—- подключаем стили мобильной версии --> <link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld, only screen and (max-width: 600px)" /> <!—- подключаем стили печати --> <link rel="stylesheet" type="text/css" href="css/print.css" media="print" /> <!—- подключаем стили общие для всех версий --> <link rel="stylesheet" type="text/css" href="css/content.css" media="all" />Разберем код:
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen and (min-width: 601px)" />Стиль должен применятся для браузеров при ширине отображания не менее 601 пикселя. Вообще правильнее было бы написать media=«only screen and (min-width: 601px)», но тогда бы без стилей остался Firefox (поддержку Media Queries обещают реализовать в следующей версии 3.1/3.5).
<!--[if IE]> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <![endif]-->Подключаем стили для всех версий Internet Explorer (о поддержке Media Queries пока ничего не известно).
<link rel="stylesheet" type="text/css" href="css/handheld.css" media="handheld, only screen and (max-width: 600px)" />Подключаем стили для всех мобильных браузеров, а также настольных браузеров с шириной отображения не больше 600 пикселей. Такая ширина выбрана для того, чтобы в нее попали не только мобильные телефоны и КПК, но и нетбуки.
Получаем такой вот результат:
Настольная версия
Печатная версия
Opera Mini
iPhone Safari
3. Тестирование
Отображение в браузере Opera Mini можно проверить здесь:http://www.opera.com/mini/demo/
Отображение в Opera Mobile и iPhone Safari можно увидеть в настольных версиях этих браузеров просто уменьшив ширину окна (при ширине меньше 601 пиикселя они переключатся на мобильные стили). Кроме того в Опере можно принудительно использовать стили мобильной версии отметив в меню View -> Small Screen.