Сегодня на рынке представлено большое количество самых разнообразных телефонов, смартфонов и прочих мобильных устройств. Все они по-разному будут отображать веб-страницу, это зависит от величины экрана и от функций, которые поддерживает мобильный аппарат. Основные моменты, которые следует учитывать - это малый размер страницы и ограниченная поддержка стилей CSS, отсюда появляется особенность верстки для мобильных устройств.
Практически все сайты для мобильных устройств используют стандарт Doctype
При верстке нужно иметь ввиду, что не все устройства поддерживают загрузку внешних стилей, поэтому следует прописывать их в документе таким образом:
В примере отступ и цвет фона указаны не случайно в полном виде. Так как некоторые мобильные браузеры не поддерживают записи вида padding: 10px 0 0 0 или backgroung: #fff , поэтому желательно писать в полном виде. Кроме того, некоторые особенно устаревшие телефоны не поддерживают фоновую картинку. Однако, чтобы мобильная версия сайта достойно смотрелась на большинстве устройств, стоит использовать однотонный фон, который будет гармонично вписываться даже при отсутствии фонового изображения.
Применение разнообразных шрифтов лучше избегать, так как их поддержка будет далеко не на всех устройствах. В качестве размеров шрифта font-size желательно использовать общепринятые атрибуты small, medium и large. А вот использование таблиц лучше избежать, если всё таки нужно её добавить, то желательно в вертикальном виде, иначе появится горизонтальная прокрутка. Стоит также учесть, что использование атрибутов cellpadding и cellspacing при верстке таблицы недопустимо.
Добавляя изображение на страницы мобильной версии сайта для правильного отображения рекомендуется использовать в атрибутах ширину и высоту графического объекта, а также не забывайте использовать атрибут alt, надпись в котором будет отображаться в том случае, если показ изображений в браузере отключен. Получится запись вида:
<img src="/image.jpg" alt="Картинка1" width="75" height="50" />
Ещё одной особенностью верстки для мобильных устройств является невозможность обработки свойств позиционирования - clear, float, overflow.
Если придерживаться всех правил и особенностей, то верстка для мобильных устройств не будет представлять из себя невыполнимую задачу, а окажется достаточно доступной для среднеграмотного разработчика.
