Перейти до мобільного режиму перегляду

Попередній перегляд будь-якої сторінки в мобільному режимі одним кліком.

Сучасна веб-аудиторія не сидить на місці. Вона переходить з 27-дюймових моніторів на роботі на кишенькові екрани в поїзді та очікує, що кожен сайт буде створений для обох потреб. Для дизайнерів, розробників, маркетологів і навіть звичайних досвідчених користувачів це щодня викликає питання: «Як ця сторінка виглядатиме на справжньому телефоні?» Власні інструменти розробника Chrome можуть відповісти на нього — після того, як ви переберетеся з меню, панелями та безліччю рамок пристроїв. Перехід на мобільний режим скорочує цей шлях до одного кліку або швидкого доступу. Торкніться значка панелі інструментів (або натисніть Alt + M), і поточна сторінка миттєво обмежиться областю перегляду розміру мобільного телефону. М’який сірий фон ізолює сторінку від решти вікна браузера, роблячи ваш контент головним елементом, водночас візуально нагадуючи вам, що активний режим мобільного перегляду. У кутку відображається невеликий значок, що відображає поточний пресет пристрою, починаючи з iPhone 14. Розширення постачається з трьома найпоширенішими точками зупинки: iPhone 14 (390 × 844 пікселів), Pixel 7 (412 × 915 пікселів) та iPad mini (768 × 1024 пікселів). Кожен пресет налаштовує метатег області перегляду, ширину елементів та поведінку прокручування, щоб імітувати відчуття вибраного пристрою. Кому це вигідно? Фронтенд-розробники можуть виявляти регресії макета за лічені секунди, не відкриваючи DevTools, що ідеально підходить для роботи з кількома гілками або проміжними серверами. UI/UX дизайнери проходять швидку перевірку на осудність, перш ніж відправляти нові композиції Figma в розробку. Команди з контролю якості можуть створювати сценарії комбінацій клавіш в автоматизованих тестових наборах для швидшого реагування на тестування. Розробники контенту та маркетологи переглядають розсилки, цільові сторінки та вбудовування в соціальні мережі, щоб забезпечити читабельність на малих екранах. Агентам служби підтримки клієнтів, які відтворюють проблеми, про які повідомляють мобільні користувачі, більше не потрібні фізичні пристрої чи симулятори. Викладачі та студенти, які досліджують концепції адаптивного дизайну, отримують доступну, безпечну для дозволів, «пісочницю». Незалежно від того, чи ви налаштовуєте процес оформлення замовлення за лічені хвилини до запуску, чи проводите заняття в класі, повному розробників-початківців, це розширення вписується у ваш робочий процес майже з нульовою кривою навчання.