Иногда возникает необходимость проверить есть ли у сайта версия для мобильных устройств.
Может ли дизайн сайта адаптироваться под раздичные виды устройств и разные размеры экранов.
Изображение. Обычная версия дизайна сайта
Самый простой вариант для проверки мобильной версии, который первым приходит в голову - это просто открыть сайт со своего мобильного телефона.
Если у сайта присутствует мобильная версия или сайт адаптируется под любые виды устройств, то при его открытии на смартфоне можно увидеть следующее:
Изображение. Мобильная версия дизайна сайта
- Вам удобно просматривать содержимое сайта. Тексты читаются легко. Кнопки и ссылки можно нажать не увеличивая экран.
- Сайт влезает целиком по ширине экрана смартфона.
- При повороте экрана блоки сайта (тексты и картинки) перестраиваются. Не возникает искажений в контенте и элементах дизайна.
- Основное меню сайта (возможно и контактные данные) вынесены в отдельное окно, которое появляется при нажатии специального значка в верхней части экрана.
- Контактные телефоны кликабельны. При нажатии телефон открывается для набора в телефонной книге смартфона.
Иногда необходимо проверить мобильную версию сайта, когда под рукой нет смартфона. Или же бывает необходимость проверить мобильную версию сайта на разных смартфонах.
В этом случае в браузерах таких как Google Chrome или Mozilla Firefox есть специальный инструмент. С помощью него можно легко проверить мобильную версию сайта, выбирая нужное мобильное устройство в меню.
При выборе нужного устройства браузер будет имитировать размеры его экрана и вы увидите как отображается ваш сайт.
Адаптивный дизайн или мобильная версия?
В чем же основное отличие мобильной версии от адаптивного дизайна? Все очень просто.
Адаптивный дизайн
Сайты с адаптивным дизайном имеют один файл стилей дизайна css, в котором прописано поведение всех блоков сайта в зависимости от размеров экрана устройства.
При загрузке страницы на каком-либо устройстве сайт определяет ширину и высоту экрана и примеяет именно те стили из файла, которые подходят под этот экран.
Причем блоки адаптируются не только при загрузке, но и моментально, при изменении размеров окна браузера.
Другими словами в файле стилей заранее учтены все возможные размеры экранов.
Мобильная версия
Сайт с мобильной версией имеет два отдельных файла стилей дизайна. Например style.css и style_mobile.css
Отдельный файл для ПК и отдельный файл для мобильных устройств.
Нужный файл стилей подгружается в зависимости от устройства с которого сайт открывают. Сайт определяет это устройство и подключает тот подходящий файл стилей .css
Как правило, в файле стилей для ПК прописано, что основная область для контента сайта зафиксирована посередине экрана и ширина этой области неизменна, например: 1024px.
А в файле с мобильными стилями прописано, что контентная область сайта располагается по ширине устройства.
При создании сайтов наша веб студия в обязательном порядке создает либо мобильную версию, либо адаптивный дизайн, в зависимости от пожеланий клиента. Мы делаем это,
так как с каждым годом все больше людей пользуются интернетом в основном со смартфонов. Если у вашего сайта отсутствует мобильная версия, то вы гарантировано теряете более половины клиентов.
Проверяем мобильную версию.
Чтобы проверить мобилную версию сайта с ПК нужно проделать ряд действий.
- 1. Откройте сайт в браузере GoogleChrome или MozillaFiefox
- 2. Нажмите F12, чтобы открыть инструменты разработчика
- 3. В открывшемся окошке найдите значок переключения на мобильные устройства и нажмите его.
- 4. Теперь в верхнем меню можно выбирать устройство. Выберите любое устройство из списка, например iPhone X
- 5. Нажмите F5, чтобы обновить страницу и чтобы отобразилась мобильная версия. Это необходимо сделать, так как сайт определяет тип устройства именно при загрузке страницы.
- 6. Все готово. Можно проверять сайт. Походите по страницам, попробуйте открыть меню, понажимать кнопки, чтобы увидеть мобильную версию сайта.
Проверяем адаптивный дизайн.
Для проверки адаптивности достаточно сменить полноэкранный режим браузера уменьшив окно. И затем просто тянуть мышью за правую или левую границу окна браузера.
Если сайт с адаптивным дизайном, то он будет моментально реагировать и изменять свой вид (вы увидите: изменениние размеров блоков, текстов, изображений, перестроение и т.д.).