#Как правильно проверить сайт на мобильность с помощью браузера.# How to check the site for mobility using a browser.

17 марта 2019

 

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

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

Начнем с браузеров. Работать будем с Mozilla Firefox и с Google Chrome. Открываете свой сайт и кликаете в любом его месте правой кнопкой мыши. Появляется вот такое окно, в котором нужно в зависимости от браузера выбрать указанную строку и кликнуть по ней уже левой кнопкой мыши.

 

 

 

 

 

 

 

 

 

 

В нижней части окна браузера  Mozilla Firefox появится дополнительная двойная строка-меню.
В Google Chrome окно браузера поделится на две части. Слева будет Ваш сайт, а справа код страницы.
Вверху над кодом также появится строка-меню.
На скриншоте видно, какие значки нужно нажать в каждом из браузеров, чтобы браузер начал показывать режим адаптивного дизайна.

 

 

 

 

 

 

 

 

 

 

 

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

Вот так это выглядит в браузере  Mozilla Firefox:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

А так в браузере Google Chrome:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Если нажать на указанные треугольные значки рядом с размерами, то можно сразу оперативно выбрать определенный размер, причем в Mozilla Firefox это будет в числовом выражении, а в Google Chrome с привязкой к моделям мобильных гаджетов. В первом браузере Вы можете задать свои значения через команду «Добавить пресет», а во втором – через «Edit» выбрать другую модель.

Западные шаблоны, я думаю, однозначно составлены под iPhone, iPad  и скорее всего за адаптивность к этим гаджетам можно не переживать. Но большинство наших сограждан не обременены этими девайсами и пользуются, «китайцами» или «корейцами».

А у них размерность (разрешение) экрана уже другие. Ну и поскольку каждый из нас творит в интересах большинства, то советую обращать внимание на следующие размерности: 320, 420, 480, 540, 600, 750, 800px по ширине. При этом значения по высоте особой роли не играют.

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

Да, чуть не забыл, про специальные сервисы для проверки на адаптивность. Посмотрите видео на эту тему моего друга.
Ссылки на сервисы в описании под видео. Забирайте их себе в закладки.
Пишите в комментариях ниже, как прошли ходовые испытания на мобильность Ваши сайты.

Если у Вас нет ещё своего сайта, но вам бы очень хотелось его заиметь.
Нет проблем!
Пишите: "ХОЧУ БЛОГ на WordPress"  в ВК - https://vk.com/id190819844
За небольшую денежную сумму, вы получите ряд видео уроков по созданию и отладки своего блога

Или можете заказать под ключ.
Профессионально Настроенный Рекрутинговый МЛМ-Блог, При Этом Вы Не Потратите Свои Силы, а Получите Исключительно Удовольствие
и 100%-ные Результаты От Продуктивной Деятельности Своего МЛМ-ЦЕНТРА!"

Прямая ссылка для приема заказов на индивидуальную настройку Бизнес-Блогов на WordPress любой сложности лично.

Нет денег? Тогда проходите сюда и действуйте,  в открывшемся окне нажми ПОЛУЧИТЬ ПОДАРОК!

Пишите в комментариях, что дали результаты тестов Ваших блогов. Мне интересно, как Вы решали свои технические проблемы.

Я надеюсь, что все у Вас хорошо. Ну а, если что-то не так, то не огорчайтесь, всегда можно сменить тему.

Интересная статья? Поделитесь ею пожалуйста с другими:

 

Комментарии на блоге

Оставьте комментарий

В Vkontakte

В Facebook