Проверить адаптивность сайта онлайн. 3 способа
03.06.2015 Создание сайта
В закладки

Проверить адаптивность сайта онлайн. 3 способа


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

Тест разрешения сайта онлайн


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

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

Проверка сайта на экранах от телефона до телевизора

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

Меню для проверки разрешения сайта на разных устройствах


На quirktools можно проверить и посмотреть как будет выглядеть сайт на нетбуках и ноутах с разрешением:
 
Netbook
  • 1024 x 600
  • 1024 x 768
Notebook
  • 1280 x 800
  • 1366 x 768
Desktop
  • 1440 x 900
  • 1600 x 900
  • 1680 x 1050
  • 1920 x 1080
  • 1920 x 1200
Посмотреть отображение сайта на планшете можно в следующих разрешениях:
  • 533 x 853 Kindle Fire HD7
  • 600 x 800 Kindle Fire
  • 600 x 1024 Samsung Galaxy Tab
  • 603 x 966 Google Nexus 7
  • 768 x 1024 Apple iPad (All)
  • 800 x 1280 Kindle Fire HD 8.9
Еще посмотреть свой сайт можно на телефоне, без его участия, на своем компьютере:
  • 176 x 220 Motorola RAZR V3m
  • 240 x 320 Motorola RAZR V8
  • 320 x 240 BlackBerry 8300
  • 320 x 480 Apple iPhone 3/4
  • 320 x 480 LG Optimus S
  • 320 x 533 Samsung Galaxy S2
  • 320 x 533 ASUS Galaxy 7
  • 320 x 568 Apple iPhone 5
  • 320 x 640 Samsung Galaxy S3/4
  • 360 x 640 Samsung Galaxy S5
  • 375 x 667 Apple iPhone 6
  • 414 x 736 Apple iPhone 6 Plus
И на конец есть возможность просмотра ресурса на телевизоре с таким разрешением:
 
Television
  • 640 x 480
  • 1280 x 720
  • 1920 x 1080
Это базовые функции, еще вы можете ввести свои параметры и задать желаемое разрешение нажав на кнопку «Настраиваемый размер экрана».

Посмотреть адаптивность сайта на макетах устройств

Так же проверить адаптивность сайта можно на responsinator.com буквально на макетах различных устройств от самых маленьких мобильных телефонов до огромных планшетов в вертикальном и горизонтальном положении.
  • iPhone 5 вертикально - ширина: 320px;
  • iPhone 5 горизонтально - ширина: 568px;
  • iPhone 6 вертикально - ширина: 375px;
  • iPhone 6 горизонтально - ширина: 667px;
  • iPhone 6 вертикально - ширина: 414px;
  • iPhone 6 горизонтально - ширина: 736px;
  • Crappy Android вертикально - ширина: 240px;
  • Crappy Android горизонтально - ширина: 320px;
  • Android (Nexus 4) вертикально - ширина: 384px;
  • Android (Nexus 4) горизонтально - ширина: 600px;
  • IPAD вертикально - ширина: 768px;
  • IPAD горизонтально - ширина: 1024px.
Все ссылки внутри макета кликабельны, за счёт чего вы можете погулять по сайту просматривая все детали и устранить неполадки с адаптивностью.

Проверка сайта на адаптивность в Firefox

Чтобы протестировать веб-страницу на её отзывчивость и проверить сайт на адаптивность прямо в браузере нужно в Firefox проделать следующие действия: жмём ☰ > Разработка > Адаптивный дизайн или с помощью сочетания клавиш:
Ctrl
+
Shift
+
M
.
 

Проверка адаптивности в браузере Firefox


Вот и все, не забывайте о различных «мелочах» которые могут отпугнуть посетителя, не будьте индивидуалистом. Обязательно проверьте еще и кроссбраузерность. Пока!
Материал подготовил(а): Mr. Edyan
Читайте больше про: Веб-мастерам
Понравилось: 3
Комментарии (8)
Добавить комментарий
Прокомментировать
  1. WorldGaz
    #6 WorldGaz Гость 2018-10-05
    0
    согласен, сервис плохо работает, мой сайт везде одинаково отображается http://gazovik.online
  2. Станислав
    #5 Станислав Гость 2018-04-15
    -1
    Автор, не вводи людей в заблуждение. Сервисы нагло врут. Они просто обрезают картинку. Современные сайты меняют расположение баннеров, к примеру, в зависимости от разрешения.
    И ещё, пишите, чёрт возьми, дату, когда выложен текст. А то, походу, статья старая - от того и актуальная.
    1. Mr. Edyan
      #4 Mr. Edyan Администратор 2018-04-15
      0
      Дата указана в материале. Статья действительно старая. Спасибо за замечание, последнее время эта неактуальная статья почему то вылезла в результате поиска. Обновлю её скоро, по возможности или удалю.
      Телеграм-Бот, который сам зарабатывает вам деньги – просто за то, что вы на него подпишетесь.
      1. Выиграл
        #3 Выиграл Гость 2018-09-13
        0
        Выиграл в гослото на программе ПРОГНОЗ ЧИСЕЛ http://helpset.ru/ спасибо!
  3. Гость Аня
    #2 Гость Аня Гость 2018-04-02
    0
    Не берусь сказать, что мой сайт везде адаптирован идеально, но на реальных устройствах различается отображение. И как писали ниже - под телефон программист что-то своё наколдовал, а тут просто отображается фигня какая-то.
  4. Алексей
    #1 Алексей Гость 2018-03-26
    0
    У меня на сайте потолки-уфа.рус стоит редирект на мобильную версию. А сервис quirktools просто гоняет десктопную версию в разных разрешениях. Не корректно работает сервис
  5. Николай
    #0 Николай Гость 2017-06-29
    0
    Спасибо за хорошую статью! Простая и быстрая проверка отображения сайта на разных устройствах.
  6. nemezida
    #-1 nemezida Гость 2016-10-05
    +16
    что-то результаты проверки в этом сервисе и на реальных устройствах различается
Войти через: