Как выглядит сайт на разных разрешениях


Как проверить сайт на разных разрешениях экрана. 3 простых способа

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

Для чего это может пригодиться?

Например, по статистике своего сайта можно проанализировать, — какие разрешения экрана и в каком процентном отношении используют посетители вашего сайта:

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

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

Как посмотреть сайт на разных разрешениях экрана

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

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

Проверка сайта в браузере. Разрешение экрана

Другой способ просмотра сайта в разных разрешениях экрана дают встроенные возможности браузеров. Например, в Гугл Хром, находясь на нужном сайте, нажимаем правой кнопкой мыши и выбираем Просмотреть код (либо пользуемся комбинацией клавиш, как показано на снимке):

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

Для выбора разных мобильных устройств используем выпадающее меню (2). Справа также указывает разрешения экрана на выбранном устройстве. Чтобы развернуть экран устройства, — пользуемся соответствующей кнопкой (3):

А более удобный способ проверки сайта на разных разрешениях экрана дают специальные онлайн сервисы.

Просмотр разрешения экрана сайта в Screenfly

Это один из самых удобных (при этом, — бесплатный) на текущий момент сервисов, с помощью которого можно быстро посмотреть сайт не только на основных, а вообще на разных разрешениях экрана!

Переходим в сервис Screenfly. Вводим в предлагаемое поле проверяемый сайт и получаем результат (прокомментирую под снимком):

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

Дополнительные функции:

  1. Можно задать вручную конкретный размер разрешения экрана
  2. Можно развернуть экран по горизонтали или вертикали
  3. Можно включить скроллинг, чтобы просматривать страницы сайта вниз-вверх.
  4. Можно скопировать ссылку на просмотр текущего выбора. Может пригодиться, если нужно обсудить с кем-либо отображение сайта с конкретным разрешением

Другие сервисы для проверки разрешения экрана сайта

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

internet explorer - Как просматривать веб-страницы с разным разрешением

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Инструмент адаптивного тестирования веб-сайтов

  • мобильный
    • Мобильная точка останова 991px 991 x 568 PX
    • Мобильная точка останова 768px 768 x 360 PX
    • Мобильная точка останова 480px 480 x 896 PX
    • Мобильная точка останова 414px 414 x 896 PX
    • Мобильная точка останова 320px 320 x 533 PX
    • Apple iPhone XS Max 414 x 896 пикселей
    • Apple iPhone XS375 x 812 PX
    • Яблоко iPhone XR414 x 896 PX
    • Apple iPhone X375 x 812 PX
    • Apple iPhone 8 Plus 414 x 736 PX
    • Apple iPhone 8375 x 667 PX
    • iPhone 6s Plus / 7 Plus 414x736 PX
    • Apple iPhone 6 / 6s / 7375 x 667 PX
    • Apple iPhone 5 / 5s 320 x 568 пикселей
    • Apple iPhone 3/4 / 4s 320 x 480 пикселей
    • Apple iPod Touch 420 x 568 PX
    • Nexus 5X411 x 731 PX
    • Nexus 6P 411 x 731 PX
    • Google Pixel 411 x 731 PX
    • Google Pixel XL 411 x 731 PX
    • Google Pixel 2411 x 731 PX
    • Google Pixel 2 XL 411 x 731 PX
    • Samsung Galaxy Примечание 5480 x 853 PX
    • Samsung Галактика S9 + 360 x 740 PX
    • Samsung Галактика S9360 x 740 PX
    • Samsung Галактика S8 + 360 x 740 PX
    • Samsung Галактика S8360 x 740 PX
    • Samsung Galaxy S7 Edge 360 ​​x 640 пикселей
    • Samsung Галактика S7360 x 640 PX
    • Samsung Галактика S6360 x 640 PX
    • Samsung Галактика S5360 x 640 PX
    • Samsung Галактика S4360 x 640 PX
    • Samsung Galaxy S4 mini360 x 640 PX
    • Samsung Галактика S3360 x 640 PX
    • Samsung Galaxy S3 mini320 x 533 PX
    • Samsung Галактика S2320 x 533 PX
    • Samsung Galaxy S320 x 533 PX
    • Samsung Галактика Nexus360 x 600 PX
    • Samsung Galaxy Примечание 8360 x 740 PX
    • Samsung Galaxy Примечание 4360 x 640 PX
    • Samsung Galaxy Примечание 3360 x 640 PX
    • Samsung Galaxy Примечание 2360 x 640 PX
    • Samsung Galaxy Note 400 x 640 пикселей
    • LG G5480 x 853 PX
    • LG G4360 x 640 PX
    • LG G3360 x 640 PX
    • LG Optimus G384 x 640 PX
    • LG Nexus 5360 x 640 PX
    • LG Nexus 4384 x 640 PX
    • Pantech Vega n6360 x 640 пикселей
    • Lenovo K
    • 0 x 640 PX
    • Motorola Nexus 6412 x 690 PX
    • One Plus 3480 x 853 PX
    • Nexus 7 (2013 г.) 600 x 960 PX
    • Nexus 9768 x 1024 PX
    • ZTE Гранд S360 x 640 PX
    • ZTE Open (Firefox OS) 320 x 480 PX
    • HTC One 360 ​​x 640 пикселей
    • HTC 8X320 x 480 PX
    • HTC Evo 3D360 x 640 PX
    • Sony Xperia Z3360 x 598 PX
    • Sony Xperia Z360 x 640 PX
    • Sony Xperia S360 x 640 PX
    • Sony Xperia P360 x 640 PX
    • Xiaomi Redmi Примечание 5393 x 786 PX
    • Xiaomi Mi 4360 x 640 PX
    • Xiaomi Mi 3360 x 640 PX
    • Blackberry Leap 390 x 695 пикселей
    • Blackberry Passport 504 x 504 PX
    • Blackberry Classic: 390 x 390 пикселей
    • Blackberry Q10 346 x 346 пикселей
    • Blackberry Z30360 x 640 пикселей
    • Blackberry Z10384 x 640 PX
    • Blackberry Torch 9800360 x 480 пикселей
    • Microsoft Lumia 1520432 x 768 PX
    • Microsoft Lumia 1020320 x 480 пикселей
    • Microsoft Lumia 925320 x 480 пикселей
    • Microsoft Lumia 920320 x 480 пикселей
    • Microsoft Lumia
    • 0 x 480 PX
    • Microsoft Lumia 830320 x 480 пикселей
    • Microsoft Lumia 620320 x 480 пикселей
  • Планшет
    • Точка останова 1024px1024 x 1366 PX
    • Точка останова 991px 991 x 1280 PX
    • Точка останова 768px 768 x 1024 PX
    • Точка останова 600 пикселей 600 x 1024 PX
    • Apple iPad Pro 1024 x 1366 пикселей
    • Apple iPad Pro 9.7768 x 1024 PX
    • Apple iPad 3, 4, Air, Air 2768 x 1024 PX
    • Apple iPad 1, 2768 x 1024 PX
    • Apple iPad mini 768 x 1024 PX
    • Samsung Galaxy Tab 3 10 дюймов 800 x 1280 PX
    • Samsung Galaxy Tab 2 10 "800 x 1280 PX
    • Samsung Galaxy Tab (8,9 дюйма) 800 x 1280 PX
    • Samsung Galaxy Tab 2 (7 дюймов) 600 x 1024 PX
    • Samsung Nexus 10800 x 1280 PX
    • HTC Nexus 9768 x 1024 PX
    • Asus Nexus 7 (версия 2) 600 x 960 PX
    • Asus Nexus 7 (версия 1) 604 x 966 PX
    • LG G Pad 8.3600 x 960 PX
    • Amazon Kindle Fire HD 8.9800 x 1280 PX
    • Amazon Kindle Fire HD 7480 x 800 PX
    • Amazon Kindle Fire 600 x 1024 PX
    • Microsoft Surface Pro 31024 x 1440 PX
    • Microsoft Surface Pro 2720 x 1280 PX
    • Microsoft Surface Pro 720 x 1280 PX
    • Microsoft Surface 768 x 1366 PX
    • Blackberry Playbook 600 x 1024 PX
    • 1600 x 2560 Google Nexus
  • Рабочий стол
    • 1024 x 600 Настольный компьютер / ноутбук
    • 1024 x 768 Настольный компьютер / ноутбук
    • 1280 x 800 Настольный компьютер / ноутбук
    • 1366 x 768 Настольный компьютер / ноутбук
    • 1440 x 900 Настольный ПК / Ноутбук
    • 1680 x 1050 Настольный компьютер / ноутбук
    • 1920 x 1080 Настольный компьютер / ноутбук
    • 1920 x 1200 Настольный компьютер / ноутбук
    • 2560 x 1440 Настольный ПК / Ноутбук
    • 3840 x 2160 Настольный компьютер / ноутбук
    • 4096 x 2304 Настольный ПК / Ноутбук
    • 5120 x 2880 Настольный компьютер / ноутбук
  • Телевидение
    • 640 x 480480p Телевизор
    • 720 x 576576p Телевизор
    • 1280 x 720 720p Телевизор
    • 1920 x 1080 1080p Телевизор
    • 3840 x 21604K Телевизор
    • 7680 x 43208K Телевизор
  • Пользовательский размер экрана
    • Икс
  • Повернуть экран
  • Включить / отключить прокрутку
  • Закладка для будущего
Подходит ли ваш веб-сайт / страница для устройств? .

html - веб-страница с различным разрешением, подходящим для

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
.

html - Сколько различных разрешений / ориентаций должен поддерживать адаптивный веб-сайт?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
.

Смотрите также

Поделиться в соц. сетях

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

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