- Верстка для мобильных устройств
- DOCTYPE, используемый для мобильных устройств
- Особенности верстки
- Подключение CSS
- Сокращенная запись свойств
- Фон элементов
- Изображения
- Таблицы
- Списки
- Шрифты
- Плавающие элементы
- Тестирование
- Мобильные браузеры
- Ссылки
- Урок 4 — Мобильная версия
- Как определить ширину экрана с помощью CSS
- Подключение jQuery на сайт
- Пример на чистом javascript
- Пример на чистом jQuery
- Подключаем jQuery
- 2 thoughts on “ Урок 4 — Мобильная версия ”
- Movies 2014
- Example
- Add Content
- Example (using classic HTML elements)
- Movies 2014
- Frozen
- Footer
- Example (using semantic HTML elements)
- Header
- Frozen
- Footer
- Add a Color Theme
- Examples
- Add More Style
- Example
- Add Side Navigation
- Example
- Fixed Navigation, Header and Footer
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
Верстка для мобильных устройств
Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности 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 .
Тестирование
- с загрузкой изображений и стилей
- без загрузки изображений
- без загрузки стилей
- с полностью отключенными стилями и изображениями
Мобильные браузеры
Ссылки
Урок 4 — Мобильная версия
В этом уроке мы будем прописывать стили для мобильной версии. Мобильная версия определяется шириной экрана.
Как определить ширину экрана с помощью CSS
@media only screen and (max-width: 768px) < section h3< font-size: 25px; >> Выше, мы задали стиль заголовку. Он сработает, если ширина устройства будет 768px или меньше Попробуем теперь преобразовать наш сайт, под мобильную версию
.toggle-btn < display: none; >@media only screen and (max-width: 768px) < .toggle-btn< display: block; float: right; margin: 25px; border: none; padding: 7px 20px; text-transform: uppercase; font-size: 12px; cursor: pointer; >header nav < display:none; >section < padding: 0 15px; >section h3 < font-size: 25px; >section p < font-size: 15px; >> - Сделали кнопку видимой, и немного украсили
- Скрыли меню
- Увеличили отсуп у контента, чтобы он небыл впритык с экраном
- Уменьшили размер текста
Скопировав этот код в jsfiddle, вы можете посмотреть изменения, уменьшая ячейку.
Подключение jQuery на сайт
Чтобы наша кнопка работала, нужно как то определить, в какой момент на кнопку нажали и если нажали, то что должно произойти
К сожалению, на чистом CSS, такое сделать нельзя. Для этого мы должны воспользоваться языком javascript.
Сам по себе javascript достаточно сложный для новичка, чтобы упростить задачу, мы воспользуемся jQuery
jQuery — Это фрэймворк(инструмент) для javascript, который облегчает задачу, укорачивает длину кода
Попробуем написать 2 абсолютно одинаковых функции на javascript и на jQuery
Пример на чистом javascript
var button = document.getElementsByClassName('toggle-btn'); var nav = document.getElementsByTagName('nav'); var show = function (elem) < elem.style.display = 'block'; >; var hide = function (elem) < elem.style.display = 'none'; >; var toggle = function (elem) < if (window.getComputedStyle(elem).display === 'block') < hide(elem); return; >show(elem); >; for(var i = 0; i < button.length; i++) < (function(index) < button[index].addEventListener('click', function() < for (var i = 0; i < nav.length; i++) < toggle(nav[i]); >>) >)(i); > Пример на чистом jQuery
Функция определяет нажатие на кнопку button, и если меню показывается, то при нажатии оно закроется и наоборот, если оно закрыто, то оно откроется. Чуть позже разберем подробнее.
Подключаем jQuery
Есть 2 варианта, скачать файл и поключить, либо воспользоваться CDN, мы воспользуемся CDN, так как это быстрее
Для этого нам надо перейти на jquery, выбрать версию и скопировать код
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> Если вы все таки решили скачать jQuery как файл, то вместо src=»https://smartideal.net/urok-4-mobilnaya-versiya/#» прописываете путь к файлу
Javascript лучше всего вставлять в конце html, тогда страница будет прогружаться быстрее