Верстка мобильной версии html

Верстка для мобильных устройств

Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо поддерживать неправильно.

Но большинство устройств среднего и уж тем более hi-end класса поддерживают HTML/CSS в той или иной степени. Таким образом, язык WML для разработки сайтов под мобильные устройства устарел и практически не используется. На смену ему постепенно приходит общепризнанный стандарт в разработке сайтов — XHTML/CSS. Кодировка — строго UTF-8 (No BOM).

DOCTYPE, используемый для мобильных устройств

Практически везде на известных мобильных сайтах, таких как Google, Яndex, используется DOCTYPE XHTML Mobile 1.0:

Также, иногда встречаются сайты с DOCTYPE XHTML Basic 1.1:

На мой взгляд, предпочтительнее использовать первый вариант.

Особенности верстки

Подключение CSS

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

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

Сокращенная запись свойств

Есть мнение, что стили вроде padding и margin нужно прописывать отдельно, используя padding-left , padding-top , margin-right и т.д. Точно так же следует поступать со всеми свойствами, которые имеют короткую запись. Например красный цвет фона стоит лучше записать как background-color: #ff0000; , а не background-color: #f00; и тем более не background: #f00; .

Фон элементов

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

Изображения

Все изображения на сайте желательно заключать в тег и не забывать добавлять атрибут alt , потому что загрузка изображений на устройстве может быть отключена, и вместо него нужно вывести замену текстом, ну и в конце концов, — мы ведь XHTML используем. 😉 При подготовке изображений желательно ужимать их до минимального размера. При добавлении изображения в документ необходимо указывать его размеры атрибутами width и height .

В итоге, каждое изображение, вставленное в документ должно иметь вид:

Таблицы

Старайтесь избегать сложных, в том числе вложенных таблиц, т.к. некоторые браузеры могут не справиться с их рендерингом и вывести кашу вместо таблицы. Также нельзя использовать атрибуты cellpadding и cellspacing , они не включены в DOCTYPE. И ни в коем случае не следует применять таблицы для верстки страниц. Таблицы не удобны в применении на маленьких экранах: чтобы прочитать объёмную таблицу, приходится применять горизонтальную прокрутку, чего тоже следует избегать учитывая, что разрешение экранов мобильных устройств несравнимо меньше, чем у настольного монитора.

Списки

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

Шрифты

Мобильные устройства в большинстве своем имеют очень плохую поддержку шрифтов, поэтому полагаться на то, что текст будет отображен именно тем шрифтом, который был задан в стилях не стоит. Но указывать хотя бы гарнитуру ( serif или sans-serif ) все равно нужно. Размер шрифтов желательно задавать в относительных единицах или, что еще лучше указывать аргументы свойства font-size в значениях small , medium , или large .

Плавающие элементы

Нельзя использовать плавающие элементы. Большинство браузеров просто не умеют их обрабатывать. Т.е. при создании верстки старайтесь не использовать такие свойства, как float , clear , overflow , clip .

Тестирование

• с загрузкой изображений и стилей
• без загрузки изображений
• без загрузки стилей
• с полностью отключенными стилями и изображениями

Мобильные браузеры

Ссылки

Источник

Адаптивная верстка для мобильных устройств

Дисклаймер: материал был написан до того, как адаптивная верстка стала трендом.

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

Взял верстку с ходу. Верстал всё в процентах. Но при отображении в мобильном устройстве (Android и IOs) верстка выглядела немного странно. Больше всего раздражал маленький размер шрифта текста для абзацев. Отсюда и возникла идея написания этого совета. Итак, разберем всё по частям и найдем самое оптимальное решение, чтобы не выглядело как «на костылях».

Итак, для верстки нам потребуются следующие элементы:

1. Общее понимание разрешений мобильных устройств.
2. Задание размера viewport.
3. СSSи MediaQuery.

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

Да, это именно так. Яндекс выдает нам множество вариантов. Становится ясно, что разрешений очень много. Верстать под все разрешения нет возможности.

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

Эти три параметра могут дать нам море информации. Пишем простую функцию:

var dpt = window.devicePixelRatio; var widthM = window.screen.width; var widthH = window.screen.height; alert(dpt+' '+widthM+' '+widthH+' '+(widthM*dpt)+' '+(widthH*dpt));

Например на Iphone мы увидим «2 320 568 640 1136», на айпад «2 768 1024 1536 2048». Lenovo P780 cообщит «1,5 360 640 540 960». Т.е. ширины экранов у перечисленных устройств будут 640, 1536, 540 пикселей соответственно. Делаем выводы: нам надо сделать версию для экранов, например, меньше 986 пикселей (стандарт для узких мониторов). Образно говоря, будет две верстки. Одна для экранов с разрешением более 986 пикселей, другая — для меньших. Особенности CSS-верстки будут описаны в последнем разделе.

Задание размера viewport

О viewport можно найти в поиске много мусора. Почти везде идет ширпотреб без объяснения логики. На самом деле тут всё очень просто:

Размер вьюпорта можно менять, используя следующую конструкцию в head:

Для верстки используем только два параметра width и user-scalable. Первым задаем размер видимой части, второй разрешает ее увеличивать (применять zoom двумя пальцами).

Обозначив width=device-width, мы сообщаем браузеру, что нам нужна область просмотра контента, равная ширине экрана мобильного устройства.

Можно вручную задать значение для width. Например content=»width=600″, но этого не рекомендуем, потому-что различные носимые устройства могут иметь абсолютно различную ширину экрана.

Более подробно про viewport можно прочитать в статье «Адаптация сайта на мобильных устройствах».

СSS и MediaQuery в мобильной верстке

MediaQuery разжевано на множестве сайтов, уделять внимание описанию не будем. Лишь опишем ряд проблем в виде маленького ЧАВО.

Какой диапазон выбрать для MediaQuery при адаптивной верстке?

В работе мы использует три брекпоинта для носимых устройств: 1024px, 800px, 420px. Это рекомендация, вы можете спокойно добавить свои.

@media screen and (max-width : 1024px) < … >@media screen and (max-width : 800px) < … >@media screen and (max-width : 420px)

Мелкий текст в адаптивной/мобильной верстке сайта.

Решение: стоит увеличить размер шрифта в соответствии с devicePixelRatio или просто в 1,5 раза. Например, так:

@media screen and (max-width : 600px) < .vulc__nav < font-size:1.5em; >>

Изменяется размер шрифта при смене ориентации/вращении мобильного устройства.

Гироскопом уже никого не удивишь, его ставят китайцы даже в самые дешевые смартфоны. Удивить можно верстальщика. Решение:

Сбрасываем форматирование для элементов форм

Каждый браузер должен, нет, просто обязан быть уникальным. Исправляем косяк с различным форматированием элементов форм, отменяя дефолтные стили браузера. А уже дальше делаем, как на душе лежит.

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], textarea

Safari в IOs увеличивает шрифты в верстке

Mobile Safari в Ios (а также Chrome для Android, Mobile Firefox и IE Mobile) автоматически увеличивают размер шрифта внутри широких блоков. Это можно пофиксить двумя строчками CSS:

Читайте также:

Источник

# Адаптивная верстка

• Если верстам: pc -> tablet -> mobile (концепция Desktop First )

@media screen and (max-width: 1200px)  /* если ширина экрана стала меньше 1200px, применяются свойства, написанные здесь */ > 

• Если верстам: mobile -> tablet -> pc (концепция Mobile First )

@media screen and (min-width: 700px)  /* если ширина экрана стала больше 700px, применяются свойства, написанные здесь */ > 

# Примеры

# Desktop First

# Mobile First

# Meta Viewport

meta name="viewport" content="width=device-width, initial-scale=1"> 

• Viewport — видимая пользователю область страницы (то, что может увидеть пользователь, не прибегая к прокрутке)
• Метатег Viewport — был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Он предназначен для того, чтобы веб-страницы отображались корректно на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi)

meta name="viewport" content=" width=device-width, initial-scale=1.0, minimal-scale=1.0, maximal-scale=1.0, user-scalable=no " > 

# Параметры

• width=device-width — соотношение ширины видимой области веб-страницы с CSS шириной устройства
• initial-scale=1.0 — первоначальный масштаб веб-страницы (1.0 == 100%)
• minimal-scale=1.0 — задаёт минимальный масштаб
• maximal-scale=1.0 — устанавливает максимальный масштаб
• user-scalable=no — указывает, может ли пользователь управлять масштабом

# width=device-width

• width=device-width отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству (device-width). CSS ширина устройства — это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана
• Н-р, смартфон iPhone 4 с физическим разрешением 640×960 имеет CSS разрешение 320×480. Это означает то, что сайт с метатегом viewport (width=device-width) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320×480 (в данном случае вместо device-width будет подставляться значение 320px). Т.е. на один CSS пиксель будет приходиться 4 физических пикселя (2 по горизонтали и 2 по вертикали)

• Apple iPhone 3
• Диагональ 3.5″
• Плотность пикселей 163ppi
• Физическое разрешение 320×480
• Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров)
• Т.е. на веб-странице этого смартфона, текст, выполненный размером 16px, будет также хорошо читаемым как на мониторе компьютера

• Apple iPhone 4
• Диагональ 3.5″
• Плотность пикселей 326ppi
• Физическое разрешение 640×960
• Более высокое разрешение при тех же размерах экрана
• Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше
• Таким образом, текст будет реально выглядеть на 8px
• Чтобы сделать эту страницу пригодной для чтения, её представление необходимо увеличить в горизонтальном и вертикальном направлении в 2 раза (отмасштабировать)

Источник