X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

Проверка отображения страниц на мобильных устройствах

Приклад
  • 2024-10-06
  • 2978 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Если Вы занимаетесь версткой, то рано или поздно столкнетесь с тем, что нужно будет сделать адаптивную верстку и проверить результат своей работы. Очень хорошо, если у Вас есть под рукой мобильное устройство, на котором можно сделать проверку и посмотреть правильно ли сделано все.

Мобильные устройства

Чаще всего нужных устройств нет, да и не особо охота пользоваться ими каждый раз, когда надо проверить ту или иную страницу. Для такой работы можно использовать несколько методов.

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

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

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

Screenfly

Перед Вами откроется страница с строкой, куда нужно ввести адрес нужной страницы или сайта.

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

Screenfly

Можно поворачивать окно с страницей, выбрать мобильное устройство или размер монитора. Есть кнопка обновления, возможность включения и отключения полосы прокрутки. Также есть возможность задавать произвольный размер окна, что тоже не плохо. Лично мне нравится данный сервис и я часто пользуюсь ним для того, чтобы посмотреть, корректно ли все отображается.

Второй сервис предоставляет, всеми любимый Google. Это сервис PageSpeed Insight.

PageSpeed Insights анализ содержания веб-страницы

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

PageSpeed Insights

Кстати, отображается статистика не только для мобильных, но и для компьютеров. Подробнее об этом в следующей статье, смотрите под этой кнопкой в навигации - Следующая запись.

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

Существует еще много сервисов и возможно Вы уже пользуетесь некоторыми из них. Если Есть те, которые нравятся Вам больше всех, пишите в комментариях о них и делитесь своим опытом работы с ними. Буду рад попробовать и другие инструменты для веб-мастеров, ведь любой инструмент по своему полезен.

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 4, в среднем: 5 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078