Как сделать мобильную версию сайта
Создать мобильную версию сайта можно тремя способами:
- Сделать отдельный сайт для мобильных устройств на поддомене;
- Создать мобильные приложения под популярные мобильные ОС (iOS, Android, Windows Phone);
- Использовать адаптивную верстку на сайте.
Со вторым пунктом всё ясно: если вы умеете программировать под мобильные платформы, то это не составит труда, а если нет — нужно заплатить денег профессионалам.
Теперь что касается первого и третьего пункта. Тут нужно смотреть на формат вашего сайта. Если ваш веб-проект представляет собой некий сервис, например, почтовый сервис, как Mail.ru, или социальная сеть, как Вконтакте или Facebook, то несомненно лучше использовать отдельный поддомен и отдельную версию сайта для мобильных платформ. Если же вы, к примеру, ведете блог, то лучше использовать адаптивную верстку.
Мобильная верстка
Основные принципы создания мобильной версии сайта:
- Мобильная версия делается на отдельном поддомене (например, m.vk.com);
- Создается версия сайта, полностью адаптированная под мобильные экраны (как правило, для ширины экрана меньше 620px);
- На основном сайте при загрузке страницы детектируется браузер пользователя, ширина экрана, и исходя из этого применяется решение о перенаправлении пользователя на мобильную версию.
Если говорить об адаптивности мобильной версии под мобильные устройства, то нужно учитывать, что элементы на экране должны быть достаточно большого размера, разнесены между собой. При верстке необходимо использовать «резиновую» сетку (это означает, что размеры элементов должны меняться в зависимости от размера экрана). Этих принципов стоит придерживаться при проектировании мобильной версии.
Определить браузер и ширину экрана пользователя на основном сайте можно, например, с помощью PHP-скрипта. Пример такого скрипта вы сможете найти на detectmobilebrowsers.com.
Адаптивная верстка
Основные варианты использования адаптивной верстки:
-
Использование CSS3 Media Queries (в стилях сразу указываются все необходимые данные для нескольких вариантов разрешения экрана). Пример:
@media screen and (max-width: 1280px) < div.example > @media screen and (max-width: 1024px) < div.example >Таким образом, в зависимости от типа вашего сайта можно выбрать подходящий тип поддержки мобильных устройств. При верстке мобильной версии может оказаться полезным сервис от Google: PageSpeed Insights, который укажет на ошибки и недочеты при разработке.
Смотрите также:
- Как проверить мобильную версию сайта
- Что выбрать: мобильная версия vs адаптивный дизайн?
- Использование мета-тега Viewport
- Блочная верстка
Урок 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
$(function()< var button = $('button'); var nav = $('nav'); $('button').on('click', function()< nav.toggle(); >); >);
Функция определяет нажатие на кнопку 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, тогда страница будет прогружаться быстрее