Идеального вьюпорта не существует



В Set Studio провели замеры на своих проектах, какого размера вьюпорт у пользователей. Собрали 120000 window.innerWidth и window.innerHeight. И оказалось, что уникальных размеров — 2300. Уникальный — это когда отличается или ширина, или высота, или оба измерения.



А теперь вспомните, сколько размеров у вас в условной Figma для ваших макетов, которые нужно сверстать. Хорошо, если 3: мобильный, планшетный, десктопный. Но чаще я видел всего 2 размера: совсем мелкий мобильный под какой-нибудь iPhone и большой для десктопов. Кстати, даже на том же iPhone есть как минимум 6 вьюпортов: Safari, WebView, превью сайта по долгому нажатию (бывший 3D Touch) и всё это при горизонтальном расположении экрана.



Мораль простая: тестируйте ваши сайты на любых возможных разрешениях. В разумных пределах, конечно.



Кстати, на сайте можно найти полные данные про все 2300 уникальных вьюпорта, которые намайнили в Set Studio, если вам интересна более подробная статистика. Например, можно отранжировать по ширинам, чтобы понять, стоит ли тратить время на совсем уж мелкие экраны. Только не попадитесь в ловушку, перепутав причину и следствие: возможно, на ваш сайт не заходят с мелкими экранами, потому что он на них банально разваливается.



https://viewports.fyi/