~/products/viewport-lab/README.md

Viewport Lab

Расширение для Chrome, которое показывает текущую страницу сразу в нужных размерах экрана: один телефон крупно или шесть размеров рядом — без бесконечного растягивания окна и DevTools.

Версия: 1.1, в магазине пока 1.0
Браузеры: Chrome, Chromium, Brave, Vivaldi
Доступ: Только activeTab
Лицензия: MIT

Установить в Chrome Исходный код

Шесть телефонных размеров одной страницы рядом на общем полотне — Сетка телефонов: 390, 375, 414, 393, 360 и 384 CSS-пикселя.

Зачем

Адаптивная вёрстка ломается на конкретных ширинах: заголовок переносится не там, карточка вылезает на 360 пикселях, планшет попадает между двумя брейкпоинтами. Viewport Lab показывает эти ширины одновременно, и разница видна с одного взгляда.

Что умеет

Один экран — страница в точном CSS-размере, вписанная в окно.
Сетка телефонов — шесть популярных размеров на одном полотне.
Планшет → ПК — 430, 600, 768, 1024 и 1280 пикселей: переход от большого телефона к малому ПК.
Поворот — тот же размер в альбомной ориентации одной кнопкой.
Свой размер — любая ширина и высота от 240 до 3840 пикселей.
Полотно — общий масштаб, перетаскивание и кнопка «Вписать».
Память — режим, размер и ориентация сохраняются до следующего открытия.

Как это выглядит

Одна страница в размере 390 × 844 — Один экран: 390 × 844 с масштабом под окно.

Тот же телефон, повёрнутый в альбомную ориентацию 844 × 390 — Поворот: тот же телефон в альбомной ориентации.

Шесть размеров от большого телефона до малого ПК — Диапазон «планшет → ПК»: от 430 до 1280 пикселей.

Клавиши

Alt + Shift + V   открыть текущую страницу в Viewport Lab
1                 один экран
2                 сетка
O                 повернуть
F                 вписать сетку в окно
R                 перезагрузить превью

Клавиши привязаны к положению на клавиатуре, поэтому работают и в русской раскладке.

Установка

Откройте страницу в Chrome Web Store и нажмите «Установить».
Откройте любой сайт и нажмите иконку Viewport Lab или Alt + Shift + V.
Можно ввести и другой адрес, в том числе localhost для локальной разработки.

Работает в Chrome, Chromium, Brave и Vivaldi.

Приватность

Расширение просит только activeTab: адрес текущей вкладки читается после вашего клика и дальше компьютера не уходит. Нет аналитики, рекламы, удалённого кода и доступа ко всем сайтам. Политика конфиденциальности.

Ограничения

Сравниваются CSS-размеры: без эмуляции железа, DPR, touch, сети и user agent.
Некоторые сайты запрещают показ себя во фрейме. Для них есть кнопка «Открыть сайт».

Статус

В Chrome Web Store опубликована версия 1.0. Версия 1.1 — поворот, свой размер, клавиши и память настроек — с 31 октября на проверке в магазине и выйдет после одобрения. Исходный код открыт под лицензией MIT: github.com/vixkosla/browser-extensions.