Css только для андроид

CSS3 — мобильные интерфейсы

Если вы когда-либо работали в Интернете более-менее продолжительное время с мобильного устройства, то, несомненно, обнаружили, что крохотный экранчик (каким бы большим он не был для мобильного устройства) — не лучшее окно в Интернет.

Конечно же, практически любую веб-страницу можно просмотреть, прокручивая ее во всех направлениях и масштабируя ее туда и обратно. Но вряд ли такой процесс будет способствовать получению положительного восприятия этой страницы. Ситуация намного улучшается, если вы заходите на сайт, разработанный специально для мобильных устройств, размер содержимого которого масштабируется под размеры экрана вашего устройства.

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

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

Представляем . Эта возможность CSS3 предоставляет простой способ изменять стили веб-страницы для разных устройств и разных настроек просмотра. Аккуратное использование таких запросов может помочь вам предоставить свою веб-страницу любому устройству — от сверхширокого экрана домашнего компьютера до экрана смартфона iPhone. И все это без изменения ни единой строчки кода HTML.

Запросы о возможностях отображения

Принцип работы запросов о возможностях основан на получении ключевой информации об устройстве, на котором просматривается веб-страница, такой как, например, размер экрана, его разрешающая способность, возможности цветовоспроизведения и т.п. На основе этих сведений можно применять разные стили форматирования или даже подключать совершенно другие таблицы стилей. Результаты работы запросов о возможностях показаны на рисунках ниже:

Довольно интересно, создатели CSS пытались решить проблему разных типов устройств воспроизведения в CSS 2.2 с помощью типов носителей (media types). Вы, возможно, уже пользуетесь этим стандартом, чтобы предоставлять разные таблицы стилей для вывода содержимого на разные устройства, как показано в следующем коде:

Атрибут media также принимает значение handheld, предназначенное для мобильных устройств с экраном небольшого размера и низкоскоростным подключением. Большинство мобильных устройств пытаются обращать внимание на атрибут media и использовать таблицу стилей handheld, если такая имеется. Но этот подход изобилует разными огрехами, и возможности атрибута media весьма ограничены для работы с широким диапазоном устройств, подключенных к Интернету в настоящее время.

При использовании запросов о возможностях первое, что необходимо сделать, — это выбрать свойство, которое нужно исследовать. На рисунке выше ключевой информацией является свойство max-width, которое получает текущий размер страницы в окне браузера. Еще более полезным будет свойство max-device-width, которое проверяет максимальную ширину экрана. Если это значение небольшое, очевидно, что мы имеем дело со смартфоном или другим подобным устройством небольшого размера.

Чтобы использовать запросы о возможностях, легче всего начать со стандартной версии веб-сайта, а потом замещать определенные части разметки. В примере на рисунке выше содержимое страницы разбито на два блока:

А таблица стилей начинается с двух правил, по одному для каждого блока:

Эти правила реализуют стандартную двухстолбцовую компоновку страницы, где колонка фиксированной ширины в 330 пикселов располагается слева, а плавающая боковая панель занимает все оставшееся пространство справа.

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

В данном примере этот новый набор стилей активируется, когда ширина окна браузера становится 480 пикселов или меньше. Это означает, что в нашей таблице стилей нам требуется раздел, который выглядит так:

В настоящее время самыми популярными свойствами запросов о возможностях являются max-device-width (для создания мобильных версий веб-страниц), max-width (для применения разных стилей в зависимости от текущего размера окна браузера) и orientation (для изменения компоновки страницы, в зависимости от расположения устройства — горизонтального или вертикального).

Хотя внутри блока запроса о возможностях можно вставить все, что угодно, в этом примере просто добавляются новые правила таблицы стилей для элементов И :

Эти стили применяются в дополнение к уже определенным обычным стилям. Поэтому может потребоваться сбросить уже измененные свойства в их значения по умолчанию. В этом примере стили запроса о возможностях присваивают свойству position значение static, свойству float — значение none, а свойству width — значение auto. Это значения по умолчанию, которые были изменены исходным правилом стиля для боковой панели.

Браузеры, которые не понимают запросов о возможностях, такие как Internet Explorer, просто игнорируют новые стили и применяют исходные стили независимо от размера окна браузера.

При желании можно добавить другой раздел запроса о возможностях, который замещает эти правила еще меньшим размером. Например, следующий блок активирует применение новых правил, когда окно браузера сужается до 250 пикселов:

Но не забывайте, что эти правила замещают все, что было применено до этого, иными словами, совокупный набор свойств, установленный обычными стилями и блоком стилей запросов о возможностях для ширины окна менее 450 пикселов. Если это кажется слишком заумным, не впадайте в отчаяние — мы научимся обходить это с помощью более точно определенных запросов о возможностях в следующем разделе.

Для определения мобильных устройств наподобие смартфонов нужно использовать свойство max-device-width, а не свойство max-width, т.к. свойство max-width использует размер окна просмотра (viewport) телефона, т.е. блока веб-страницы, который пользователь веб-фона может просматривать с помощью прокруток. Типичное окно просмотра вдвое шире собственно экрана устройства.

Продвинутые запросы о возможностях

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

Теперь для окна браузера шириной 380 пикселов будут применяться два набора стилей: стандартные стили и стили в последнем блоке @media. Ответ на вопрос, упрощает или усложняет этот подход работу разработчика, зависит от того, чего именно он желает добиться. Если вы используете сложные таблицы стилей и часто меняете их, показанный здесь подход неперекрывающихся стилей часто будет самым простым способом.

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

Можно еще использовать ключевое слово not. Функционально, по сути, это такая же таблица стилей, но, может быть, более понятная:

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

Полная замена таблицы стилей

Блок @media удобен для небольших корректировок, т.к. он позволяет содержать все стили вместе в одном файле. Но для более значительных изменений может быть легче просто создать полностью отдельную таблицу стилей, а потом с помощью запроса о возможностях создать ссылку на нее:

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

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

Проблема с этим подходом состоит в том, что браузеры, которые не понимают запросов о возможностях, будут игнорировать обе таблицы стилей. Эту проблему можно решить для старых версий Internet Explorer, опять добавив основную таблицу стилей, но в условных комментариях:

Но все равно остается один небольшой пробел — версии Firefox более ранние, чем 3.5, не понимают запросов о возможностях и не используют раздел условных комментариев. Этот пробел можно было бы заполнить, определяя браузер в коде страницы, а потом подменяя новую страницу посредством кода JavaScript, но это будет очень громоздкое решение. К счастью, старые версии Firefox встречаются все реже и реже.

Распознавание мобильных устройств

Как мы уже узнали, выяснить, где просматривается веб-страница — на экране обычного компьютера или мобильного устройства, можно с помощью запроса о возможностях отображения, содержащего свойство max-device-width. Но какие значения ширины следует использовать для этого свойства?

Если вы пытаетесь идентифицировать смартфоны, проверяйте свойство max-device-width на значение, равное 480 пикселам. Это наилучшее, общеприменимое правило, которое определяет существующие сегодня телефоны iPhone и Android:

Но если вы фанат железа, это правило может вызвать у вас подозрение, т.к. современные мобильные устройства оснащены крохотными экранами со сверхвысокой разрешающей способностью. Например, размер экрана Samsung Galaxy S4 — 1920×1080 пикселов. В связи с этим можно подумать, что для этих устройств нужно использовать большее значение ширины экрана. Но, как это ни удивительно, это не так. Большинство смартфонов продолжает сообщать, что ширина их экрана — 480 пикселов, даже если они в действительности оснащены экраном высокого разрешения. Это объясняется применением этими устройствами поправочного коэффициента, который называется соотношением пикселов (pixel ratio).

Например, в iPhone 4 каждому пикселу CSS соответствует в ширину два физических пиксела, т.е. соотношение пикселов равно 2. В действительности можно создать запрос о возможностях, который определяет iPhone 4, но игнорирует более старые версии iPhone:

A iPad представляет особую проблему: пользователи могут поворачивать его, сориентировав экран горизонтально или вертикально. Но хотя это меняет значение ширины окна max-width, значение ширины экрана max-device-width не меняется. Как и книжной, так и альбомной ориентации экрана iPad сообщает, что его ширина экрана равна 768 пикселов. К счастью, если требуется менять стили в зависимости от ориентации экран iPad, в запросах о возможностях свойство max-device-width можно применять совместно со свойством orientation:

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

Источник

Как использовать медиа запросы CSS3 чтобы создать версию вашего сайта для мобильных устройств

CSS3 продолжает одновременно восхищать и разочаровывать веб дизайнеров и разработчиков. Восхищают возможности, которые предоставляет CSS3, но разочаровывает практически полное отсутствие поддержки в Internet Explorer 8. В данной статье демонстрируется техника использования CSS3, которая не поддерживается в Internet Explorer 8. Однако, для тех, кому приходится обеспечивать поддержку мобильных устройств (например, iPhone или тех, которые используют Android) такой недостаток будет безразличен.

В данной статье объясняется, как с помощью нескольких правил CSS3 можно создать рабочую версию сайта для iPhone. Будет представлен очень простой пример, а также демонстрация того, как добавить стиль маленького экрана мобильного устройства к уже существующему сайту.

Медиа запросы

Если вам когда-нибудь приходилось создавать стиль для печати страниц веб сайта, то вы уже знакомы с идеей создания специальных таблиц стилей, которые работают в определенных условиях (в данном случае таблица стилей используется при печати страницы). Такой функционал был добавлена в CSS2 с помощью типов носителей . Типы носителей позволяют задавать целевой тип носителя информации, то есть можно определить стили для целей print (печать), handheld(мобильное устройство) и так далее. К сожалению, типы носителей никогда не получали широкой поддержки в устройствах, поэтому они, за исключением типа носителя print, очень редко используются.

Медиа запросы в CSS3 подхватывают данную идею и развивают ее. Но в дополнение к определению типа устройства они позволяют получить сведения о его возможностях. Например:

• ширина и высота окна просмотра
• ориентация – например, мобильное устройство выводит информацию в альбомном или портретном режиме?
• разрешение

Если у пользователя браузер, который поддерживает медиа запросы, то мы можем написать CSS специально для определенной ситуации. Например, определить, что пользователь использует маленькое устройство (например, смартфон) и выдать ему специфический шаблон страницы.Примером применения такой техники может служить сайт конференции dConstruct.

Веб сайт dConstruct 2010 в браузере Safari на экране компьютера.

Веб сайт dConstruct 2010 на экране iPhone

На выше приведенном примере видно, что сайт не просто уменьшается в размерах, а изменяется архитектура его контента, чтобы облегчить восприятие информации на маленьком экране мобильного устройства. Некоторые могут подумать, что просто используется шаблон iPhone, но это не так.. Такой же вид будет и в Opera Mini в телефоне с ОС Android. С помощью медиа запросов и определения возможностей устройства веб сайт dConstruct может обслуживать любой вид устройств, даже таких, о которых разработчики понятия не имели!

Использование медиа запросов для создания таблицы стилей для телефонов

Чтобы начать давайте рассмотрим очень простой пример. Шаблон, представленный ниже — очень простой и имеет всего две колонки.

Простой шаблон с двумя колонками.

Чтобы облегчить чтение на экране телефона, линеаризуем весь дизайн, выстроив только одну колонку, а также сделаем область заголовка меньше, чтобы читателю не нужно было прокручивать страницу до начала контента.

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

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

В приведенном коде используется альтернативное фоновое изображение и уменьшается высота и ширина заголовка, затем устанавливаются опции для контента и навигации float: none; и изменяется установка ширины, которая определялась ранее в таблице стилей. Данные правила действуют только для устройств с маленьким размером экрана.

Вид примера на экране iPhone.

Присоединение отдельной таблицы стилей с использованием медиа запросов

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

Присоединение таблицы стилей для мобильных устройств:

Testing media queries

Если вы являетесь владельцем iPhone, телефона с ОС Android или другого устройства, которое имеет браузер, поддерживающий медиа запросы, то можно проверить работу измененного CSS на них. Хотя потребуется загрузить код сайта, чтобы посмотреть на него. А как быть в том случае, если такого устройства нет или нужно провести проверку локально?

В процессе разработки вам может помочь отличный сайт ProtoFluid. Он предоставляет форму для ввода URL и просмотра дизайна, как он будет отображаться на экране iPhone, iPad или другого подобного устройства. Изображение ниже показывает вид сайта dConstruct, который представлен сервисом ProtoFluid для iPhone.

Сайт dConstruct, представленный сервисом ProtoFluid для вида на iPhone.

Можно также ввести размер окна, если нужно проверить отображение сайта на определенном устройстве с известным размером экрана.

Для использования ProtoFluid вам нужно немного изменить медиа запрос, который мы использовали ранее, чтобы добавить опцию max-width. Это будет означать, что медиа запрос будет действовать в том случае, если пользователь использует обычный браузер, но в очень маленьком окне.

После обновления кода, просто перегрузите страницу и уменьшите размер окна, когда он достигнет 480 px, шаблон страницы измениться. Медиа запрос теперь реагирует, когда размер окна просмотра соответствует введенным вам значениям.

Теперь все готово, чтобы использовать ProtoFluid. Основное преимущество ProtoFluid заключается в том, что можно использовать инструменты разработчика , такие как FireBug, для настройки дизайна, что весьма затруднительно на iPhone. Конечно, вы можете пробовать ваш сайт на различных устройствах, но ProtoFluid делает процесс разработки и тестирования значительно проще.

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

Настройка существующего сайта

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

Шаблон страниц

Рассматриваемый сайт использует шаблон фиксированной ширины с тремя колонками. Дизайн был разработан пару лет назад и медиа запросы тогда не принимались во внимание во время разработки.

Добавление нового файла стилей

Чтобы сделать линеаризацию сайта нужно провести много изменений, таким образом, нужно добавить новый файл с таблицей стилей после основного и с условием использования только при значении max-width меньше 480 px.

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

Сжатие заголовка

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

Линеаризуем шаблон

Далее нужно линеаризовать шаблон и сделать одну колонку. Шаблон создан с использованием плавающих блоков, поэтому надо найти все правила, которые делают колонки плавающими и установить для них свойства float: none и width:auto. Таким образом все колонки выстроятся одна под другой.

«Причесываем»

Теперь посмотрим на шаблон в ProtoFluid и точно настроим размеры полей и отступов для различных областей, которые будут отличаться от того, что установлено для обычного шаблона. С использованием Firebug для ProtoFluid такая работа выполняется быстро и легко, а получившийся набор правил CSS затем копируется в таблицу стилей.

Проверяем сайт в ProtoFluid.

Проверка сайта на iPhone

При проверке на iPhone выяснилось, что сайт не масштабируется в одну чудесную колонку. На сайте разработчиков Safari есть решение для такой проблемы — нужно добавить тег meta к заголовку сайта. в котором устанавливается ширина окна просмотра равной ширине дисплея устройства.

После добавления тега meta сайт стал выводиться как было задумано — в одну колонку:

Вид сайта на экране iPhone.

Простая модификация сайта позволяет сделать легко ваш ресурс доступным для пользователей мобильных устройств.

Заключение

Использованием медиа запросов может ввести CSS3 в вашу повседневную деятельность. Стоить помнить о том, что браузеры, которые поддерживают медиа запросы, также поддерживают все остальные свойства CSS3. Таким образом можно использовать все возможности CSS3, когда пользователь использует iPhone или другое мобильное устройство.

Источник