Проверить адаптивность сайта онлайн. 3 способа
2015-06-03 Создание сайта Mr.Edyan 0
Каждый Вебмастер который уже более-менее понимает в сайтостроении и хотя бы на базовом уровне знает
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
.
Вот и все, не забывайте о различных «мелочах» которые могут отпугнуть посетителя, не будьте индивидуалистом. Обязательно проверьте еще и кроссбраузерность. Пока!
-
Популярные виды сайтов..25-ноя, 2015, 17:50
-
Адаптивный дизайн сайта: зачем нужен и как..20-сен, 2015, 12:36
-
Делаем сайт с помощью генератора страниц..14-июн, 2015, 19:46