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

Як можна відкрити мобільний вигляд веб-сайту через робочий стіл браузера?

Firefox:

• У Windows / Linux натисніть Ctrl+ Shift+M
• У macOS натисніть option+ command+M

Ви також можете знайти пункт меню у розділі ("Інструменти"), "Веб-розробник", "Режим чуйного дизайну".

Chrome:

Спочатку потрібно відкрити "Інструменти для розробників":

• У Windows / Linux натисніть Ctrl+ Shift+ Iабо простоF12
• У macOS натисніть option+ command+I

Щойно інструменти для розробників відкриті та зосереджені, ви можете відкрити панель інструментів пристрою:

• У Windows / Linux натисніть Ctrl+ Shift+M
• У macOS натисніть command+ shift+M

Ви також можете знайти пункт меню, відкривши інструменти для розробників ("Інші інструменти", "Інструменти Develepor"), а потім натисніть на значок, схожий на мобільний телефон перед таблицею "Переключити панель інструментів пристрою".

Сафарі:

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

Ви можете знайти пункт меню, натиснувши "Розробити", "Увійти в режим чуйного дизайну". Якщо ви не бачите пункт меню "Розвиток", його потрібно ввімкнути, відкривши "Налаштування", "Додатково" та позначте "Показати меню" Розробити "у рядку меню".

Край:

• Натисніть, F12щоб відкрити інструменти для розробників, а потім Ctrl+, 7щоб відкрити "вкладку Емуляція". Налаштуйте пристрій, який ви хочете наслідувати.

Ви можете відкрити інструменти для розробників за допомогою миші, клацнувши правою кнопкою миші всередині веб-сторінки та вибравши «Оглянути елемент».

Відповідь Флімма на 100% правильна. На всякий випадок, якщо запам'ятати ярлики занадто багато клопоту, саме ця синя кнопка в Інструментах для розробників може перемикатися між веб-переглядами та переглядом мобільних пристроїв / планшетів:

Або з Firefox:

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

Для тестування я використовую такі веб-сайти:

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

Обидва вищевказані сайти дозволяють мені переглядати веб-додаток у кількох ширинах пристроїв.

Додайте розширення "перемикач агентів користувачів" у свій веб-переглядач та вкажіть мобільний користувальницький агент. Якщо веб-сайт досить розумний , він буде обслуговувати вас, оптимізовану для мобільних версій.

Я не рекомендую будь-яке конкретне розширення. Ідеальний варіант повинен мати вбудовані попередні налаштування для мобільних браузерів та можливість вмикати чи відключати перемикання агента користувача на основі веб-сайту.

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

Насправді є ще цікавіше рішення, яке я нещодавно виявив: https://blisk.io/

Я утримаюсь від використання (на зразок) "партнерської посилання" для будь-якої особистої вигоди (Існує "система, заснована на лексемах", за допомогою якої ви можете заробляти кредити, щоб отримати такі речі, як "командний хмарний простір" та "преміум-функції" для використання це), але Blisk насправді досить неясний.

Цей "браузер, створений для розробки" на основі хрому, пропонує безліч способів демонстрації сторінки на різних пристроях з вертикальною "панеллю" на лівій стороні, як ви бачите за замовчуванням Chrome Developer Tools за правим вертикальним стовпцем.

Це робочий погляд. Хоча існують деякі обмеження щодо його "розширеного функціоналу фрієм", він все ще працює дуже добре для "попереднього перегляду" як для ПК, так і для мобільних версій ваших сторінок / сайтів у порівнянні. Оплачені функції здаються досить радісними, якщо ви працюєте у віддалених командах (хоча особисто я вважаю, що вона потребує кращої програми "тест-драйву", перш ніж підключати людей до місячних витрат).

Повне розкриття: на день для попереднього перегляду для мобільних пристроїв НАДНІЙ ДРУЖНИЙ "часовий ліміт" (перемикає відкрити / закривати від значка праворуч адресного рядка - змінити "попередній перегляд пристрою" з крихітного посилання на " меню у верхньому правому куті "Показати список пристроїв").

BliskDemoScreenshot

Також: Я знайшов кілька справді хитрощів із розширеннями браузера, як-от 2 різних "User-Agent Switcher" з Chrome / Firefox, які йдуть трохи далі, дозволяючи вам перемикатися між рядками користувача-агента браузера різних операційних систем І браузери для них.

Я вважаю за краще аромат "esolutions.se" через те, як легко додати до списку користувацькі користувацькі агенти до стільки налаштувань, скільки ви коли-небудь могли захотіти (також працює в автономному режимі, що може бути зручно в певних випадках): https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

У всякому разі, це мої 2 копійки. : P