Як перевірити відображення сайту на мобільних пристроях

Мобільні пристрої активно витісняють настільні PC і ноутбуки в якості інструменту для доступу до Інтернету. Складно не погодитися з тим, що читати улюблені сайти, та й просто клікати в Мережі, лежачи вдома на дивані або сидячи десь за чашкою кави – набагато зручніше, ніж сидіти на одному й тому ж місці, перед екраном комп’ютера.

Для бізнесу це теж дзвіночок – кількість мобільного трафіку в середньому вже становить понад 30% від усіх інтернет-користувачів, а в деяких тематиках вже впритул наблизилася до позначки 50%. І це навіть якщо говорити про комерційні тематики, не кажучи вже про інформаційні сайти.

Так що адаптивна версія дизайну сайту або інтернет-магазину – це в наш час вже необхідність. А її відсутність може бути критичною помилкою, через яку бізнес втрачає клієнтів і недоотримує прибуток.

У цій замітці я поділюся з вами відразу декількома способами перевірити, як ваш сайт відображається на смартфонах і планшетах. Для цього можна скористатися як спеціальними сервісами, так і засобами браузера Google Chrome.

Responsivetest.net

 Хороше юзабіліті і застосування сучасних технологій в процесі розробки, роблять цей сервіс дуже зручним інструментом. Після переходу на головну, автоматично завантажується сайт-приклад, на якому можна поекспериментувати при вивченні функціоналу.

Для перевірки адаптивності дизайну сайту-пацієнта, можна вибрати пристрій зі списку (смартфони, планшети, PC):

Або, вказати власне розширення екрану на вибір, просто ввівши цифри у відповідному полі:

Доступна і смуга прокрутки, щоб можна було краще все роздивитися.

Screenfly

 Сервіс для тестування відображення сайту на екранах різного розміру, який стабільно входить до збірки найпопулярніших інструментів такого роду. Для початку роботи просто вводимо адресу сайту в рядок, і натискаємо кнопку «Go». Ну а тепер просто вибираємо пристрій зі списку:

Варто зазначити, що вибір досить широкий – від мобільних телефонів і до телевізорів, як аналогового типу, так і HD. Результатом можна поділитися з іншими людьми, для чого достатньо натиснути кнопочку «Share»:

Дивимося сайт на різних пристроях в Chrome

Цим браузером, безсумнівно, користується більшість з наших читачів, і, якщо перед вами стоїть завдання перевірити відображення сайту на мобільних, зробити це можна за допомогою інтегрованих в нього інструментів.

Перейдіть на потрібну сторінку і натисніть кнопку F12 на клавіатурі. Відкриється додаткова панель інструментів праворуч, на якій потрібно натиснути на іконку «Toggle device mode»:

Вкладка трансформується, і тепер, в випадаючому меню «Responsive» можна вказати пристрій, екран якого ви хочете емулювати:

Ну от і все. Головна перевага такого способу – відсутність необхідності у використанні сторонніх сервісів. Все можна зробити засобами самого браузера.