Что такое Viewport
Обычно мы привыкли ориентироваться на параметры расширения экрана устройства (Device resolution) и это правильно в случае с тестированием на десктопе.
Что касается тестирования на мобильных устройствах то нужно ориентироваться не на Device resolution, а на другой параметр – видимую область экрана (Viewport), так как макеты для мобильных устройств (в том числе и планшетов) создаются именно под параметры Viewport.
Например: Apple iPhone 12 mini. Его Device resolution 1080 x 2340. Вместе с тем его Viewport всего 360 x 780.
Также следует учитывать, что в дизайне веб сайта, основным параметром является ширина видимой области экрана (в приведенном выше примере это 360), тогда как ее высота не имеет значения.
Выбор мобильного устройства для тестирования верстки
1. У нас стоит задача протестировать верстку на мобильном приложении.
2. Идем в фигму. Смотрим на какой Viewport расчитан дизайн:
3. Идем сюда ( https://viewportsizer.com/devices/ ) и смотрим устройства с viewport 320:
Если же хотим посмотреть параметры viewport у эмулированного устройства на Browserstack, обращаем внимание на то, что тут указано в dp, а не px. Соответственно цифры будут другие:
