Css мобильный браузер телефон

Создаём мобильную версию сайта, используя CSS3 медиа-запросы

CSS3 продолжает радовать и, одновременно, разочаровывать веб-дизайнеров и веб-разработчиков. Мы радуемся возможностям, которые открывает перед нами CSS3, и тому, сколько проблем можно будет решить, используя их. Разочарование заключается в том, что все эти возможности недоступны браузерам Internet Explorer 8 и ниже. В этой статье будет продемонстрирована техника, использующая функционал CSS3, который также не поддерживается в Internet Explorer 8. На самом деле это не имеет никакого значения, т.к. главной областью применения этой техники являются мобильные устройства, такие как Iphone и Android-смартфоны, у которых браузеры поддерживают большое количество свойств CSS3.
В этой статье я объясню, как, с помощью нескольких правил CSS, вы можете создать Iphone-версию вашего сайта. Мы взглянем на очень простой пример и, попутно, я буду объяснять, как написать и использовать таблицу стилей для мобильных устройств для существующего сайта.

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

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

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

• высоту и ширину окна браузера
• высоту и ширину экрана устройства
• положение в пространства (вертикально или горизонтально)
• разрешение экрана

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

Так выглядит сайт на экране монитора:

А так он выглядит на экране смартфона:

Как вы видите на примере выше, мобильная версия сайта не просто была уменьшена, чтобы соответствовать экрану на телефоне – её структура была полностью переработана и спроектирована заново, чтобы сайт легко воспринимался на маленьком экране устройства. Многие подумают, что это специальный макет для iPhone, но это не так. Сайт одинаково выглядит на Android-устройствах, iPhone и в телефонах с браузером Opera Mini. используя медиа-запросы мы определяем свойства устройств и отображаем специально написанные стили для них.

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

Для начала разберём очень простой пример – ниже представлен макет с двумя колонками.

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

Первый способ использовать медиа-запросы – это просто написать альтернативную секцию с правилами CSS в вашей таблице стилей. Итак, для определения маленьких экранов, мы используем следующий синтаксис:

@media only screen and (max-device-width: 480px)

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

@media only screen and (max-device-width: 480px) < div#wrapper < width: 400px; >div#header < background-image: url(media-queries-phone.jpg); height: 93px; position: relative; >div#header h1 < font-size: 140%; >#content < float: none; width: 100%; >#navigation < float:none; width: auto; >>

Мы используем альтернативное изображение меньшего размера и уменьшаем высоту заголовка, затем отменяем свойство float для контента и навигации, установив его в значение none . Это нужно чтобы блоки с контентом и навигации располагались в нормальном потоке – друг под другом. Следующий шаг – установка ширины для контента, равной родительского элемента, а ширины блока навигации установим в значение auto . Все эти правила вступят в силу только на маленьком экране.

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

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

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

Модернизация существующего сайта

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

Макет для экрана монитора

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

Подключаем новую таблицу стилей

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

Для создания новой таблицы стилей, мы делаем копию основной и называем её small-device.css. Мы перезапишем некоторые правила, а всё лишнее удалим.

Сокращаем размер шапки

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

Изменяем макет

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

Прибираемся

Настало время проверить наш макет в онлайн-эмуляторе и подкорректировать мелкие недочёты, чтобы всё смотрелось супер. Для облегчения этого процесса рекомендую использовать расширение firebug для Mozilla.

Тестируем на Iphone

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

Вот теперь сайт отображается как надо!

Это был очень простой пример, который показал, как легко адаптировать сайт под мобильные устройства.
Источник

Источник

Браузеры для Android с функцией исследования элемента

Исследование элемента (оно же веб-инспектор) – это полезная функция, которая существует во всех ПК-браузерах и позволяет отлаживать верстку в режиме «Live» без внесения изменений непосредственно в файлы сайта.

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

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

Поискав информацию в Интернете, я нашел несколько браузеров для Android, которые позволяют в некоторой степени исследовать элементы на том или ином сайте, о которых я вкратце и с удовольствием вам расскажу.

HTML/CSS Website Inspector – мощный браузер с веб-инспектором для Android

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

Отличительными особенностями являются:

1. Поиск и редактирование HTML-элементов.
2. Веб-консоль. Позволяет выполнить JavaScript.
3. Просмотр всего исходного кода сайта с возможностью его редактирования.
4. Функция исследования элемента. Позволяет показать код элемента, который выбран на странице.

1. Реклама в приложении.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Помимо этого, хочется отметить, что на момент написания статьи приложение активно развивалось автором и имело более 1 000 000 установок.

Поддержка Android 4.1+. Интерфейс на английском языке.

Web Inspector (Open Source) – браузер с инструментами разработчика для Android

Это приложение, в отличие от первого, немного проще, менее популярнее (всего чуть более 10 000 установок) и обновлялось несколько лет назад.

Несмотря на это, наделено своими интересными функциями, в числе которых:

1. Список сетевых ресурсов (изображения, скрипты, стили и прочее).
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Поиск (исследование) и редактирование отдельных элементов. Дополнение – возможность показать ближайшего родителя.

1. Нет возможности посмотреть весь исходный код страницы.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Поддержка Android 4.0+. Интерфейс на английском языке.

Droid Web Inspector – браузер с полным набором инструментов разработчика для Android

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

Браузер с консолью разработчика, в функции которой входит:

1. Очистка кэша.
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Полный исходный код страницы (HTML) с функцией отслеживания и редактирования стилей элементов.
4. Отображение дерева DOM.
5. Отслеживание JS- и CSS-файлов с возможностью их редактирования.
6. Отображение сетевых ресурсов (изображения, скрипты, стили и прочее).

1. Не идет на старых версиях Android.
2. Отсутствует исследование отдельных элементов. Возможно, баг моего телефона, но все элементы доступны в общем коде HTML.

В отличие от приложения Web Inspector (Open Source), на момент написания статьи имело всего чуть более 5 000 установок, но, несмотря на это, активно развивалось автором.

Поддержка Android 5.0+. Интерфейс на английском языке.

Источник