Romych в 12:59, 30 жовтня 2020

2020-10-30T12:59:28Z

Нова сторінка

* [https://docs.google.com/spreadsheets/d/1kZ877-GMR-EWVzd97ITfL9tjniziy9IdQt2AUGZOzmk/edit#gid=462480101&fvid=1426812764 Responsive Design Testing Table] — Google таблица для тестирования

== Статистика ==

=== Весь мир ===

* http://ru.screenresolution.org/
* https://gs.statcounter.com/screen-resolution-stats
* http://www.w3schools.com/browsers/browsers_display.asp

'''По типам устройств:'''

* [https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide Desktop] / [https://gs.statcounter.com/screen-resolution-stats/tablet/worldwide Tablet] / [https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide Mobile] — gs.statcounter.com

См. также:

* [https://yesviz.com/popular-screen-resolutions.php Popular Phones & Tablets] — yesviz.com
* https://ios-resolution.com/ — iOS Resolution
* http://iosres.com/ — iOS Quick Reference for iPhone, iPad, and Apple Watch
* https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html — Mobile Viewports for Responsive Experiences
* https://viewportsizer.com/devices/
* [https://deviceatlas.com/blog/viewport-resolution-diagonal-screen-size-and-dpi-most-popular-smartphones Viewport, resolution, screen size and DPI for the most popular smartphones]

=== Украина ===

* http://top.bigmir.net/global/resolution
* https://gs.statcounter.com/screen-resolution-stats/all/ukraine

'''По устройствам:'''

* [https://gs.statcounter.com/screen-resolution-stats/desktop/ukraine Desktop] / [https://gs.statcounter.com/screen-resolution-stats/tablet/ukraine Tablet] / [https://gs.statcounter.com/screen-resolution-stats/mobile/ukraine Mobile] — gs.statcounter.com
* https://f.ua/shop/zhk-monitory/ — разрешения популярных в Украине мониторов: слева список «Максимальное разрешение»
* [https://rozetka.com.ua/mobile-phones/c80003/producer=apple/ Розетка — iPhone] (см. слева фильтр «Серия»)

== Рекомендуемые для тестирования разрешения ==

По состоянию на июль 2020 приоритетность разрешений, в которых нужно тестировать сайты.

Популярность по данным статистики по всему миру:

* [https://gs.statcounter.com/screen-resolution-stats gs.statcounter.com] — проценты приведены по каждой группе устройств отдельно (десктопы, планшеты, мобильники)
* [http://ru.screenresolution.org/ screenresolution.org] — проценты суммарные по всем устройствам вместе (брались в том случае, если соответствующего разрешения не было в первой статистике по группам устройств).

Значком ⭐ помечены устройства, которые есть в Chrome Inspector.

=== Десктопы ===

{| class="wikitable"
|-
! Важ- ность !! Screen Resolution !! Viewport !! Статистика !! Описание
|-
| style="text-align:center;" | <big>1</big> || '''1920x1080''' || 1920x935 || 21% || Full HD — 2-е место по распространенности 1-е по перспективности: большинство современных мониторов и ноутбуков.<ul>
<li>'''1920x1080 — 20% — мониторы от 21,5″ до 27″ и ноутбуки от 13″ до 17″'''</li>
<li>1920x1200 — 1% — мониторы 24″-25″</li>
</ul>
|-
| style="text-align:center;" | || 1600x900 || 1600x750 || 7% || 3-е место по популярности среди современных ноутбуков.<ul>
<li>1600x900 — 4,6%</li>
<li>1680x1050 — 2,5%</li>
</ul>
|-
| style="text-align:center;" | || '''1536x864''' || 1536x685 || 7% || <ul>
<li>'''1536x864 — Ноутбуки 13″-15″ с разрешением Full HD 1920x1080 и настройкой в Windows 125% увеличения.''' Это не настоящее разрешение, а масштабированное, поэтому [[#Размеры элементов интерфейса]] больше, а Viewport меньше.</li>
<li>1536x960 — 0.07% — MacBook Pro 16″ 2019</li>
</ul>
|-
| style="text-align:center;" | || '''1440x900''' || 1440x755 || 7% || '''Laptop with HiDPI screen ⭐, MacBook Pro 15″ (2014-2018), MacBook Air 13″ (2014-2017), старые 19″ мониторы'''
|-
| style="text-align:center;" | <big>2</big> || '''1366x768''' || 1360x623 || 25% || '''1-е место по распространенности: бюджетные 18,5″ мониторы и 15″ ноутбуки, старые (2014-2015) MacBook Air 11″'''<ul>
<li>1366x768 — 23,3%</li>
<li>1360x768 — 1,5%</li>
</ul>
|-
| style="text-align:center;" | <big>3</big> || '''1280x800''' || 1280x655 || 10% || <ul>
<li>1280x720 — 4%</li>
<li>'''1280x800 — 3% — Laptop with MDPI screen ⭐, MacBook 12″ (2015-2017), MacBook Pro 13″ (2014-2018), MacBook Air 13″ (2018)'''</li>
<li>1280x950 — <0,5% (Laptop with touch ⭐)</li>
<li>1280x1024 — 3%</li>
</ul>
|-
| style="text-align:center;" | || 1024x768 || 1024x623 || 3% || Старые 15″ мониторы (и планшеты iPad горизонтально)
|}

=== Планшеты ===

{| class="wikitable"
|-
! Важ- ность !! Screen Resolution !! Статистика !! Описание
|-
| style="text-align:center;" | || 1024x1366 || 3% || iPad Pro ⭐ 12.9″
|-
| style="text-align:center;" | || 834x1112 || 5% || <ul>
<li>834x1112 — 4% — iPad Pro 10.5″</li>
<li>834x1194 — 1% — iPad Pro 11″</li>
</ul>
|-
| style="text-align:center;" | <big>2</big> || '''800x1280''' || 10% || '''Nexus 10 ⭐, Kindle Fire HDX ⭐, Android 7″-10″'''
|-
| style="text-align:center;" | <big>1</big> || '''768x1024''' || 58% || '''iPad ⭐: 2017, 2018, Air, Air 2, Gen 1/2/3/4, Mini 1/2/3/4, Pro 9.7'''
|-
| style="text-align:center;" | || 600x960 || 9% || <ul>
<li>600x960 — 0.05% — Nexus 7 ⭐</li>
<li>601x962 — 6% — Old Android</li>
<li>600x1024 — 3% — Amazon Fire HD 8</li>
</ul>
|}

=== Телефоны ===

{| class="wikitable"
|-
! Важ- ность !! Screen Resolution !! Статистика !! Описание
|-
| style="text-align:center;" | || 480x854 || 0.02% || <ul>
<li>450x600 — Surface Duo ⭐</li>
<li>480x854 — 0.02% — Nokia N9 ⭐</li>
</ul>
|-
| style="text-align:center;" | <big>2</big> || '''414x736''' || 19% || <ul>
<li>412x660 — 0.01% — Nexus 5X ⭐</li>
<li>411x731 — 0.002% — Pixel 2 ⭐</li>
<li>412x732 — 2% — Nexus 6/6P ⭐, Samsung J7 Prime2, Google Pixel/XL/2 XL</li>
<li>'''414x736 — 4% — iPhone 6/6S/7/8 Plus ⭐'''</li>
<li>411x823 — Pixel 2 XL ⭐</li>
<li>411x846 — Google Pixel 3a/3 XL</li>
<li>412x846 — 4% — Samsung Galaxy S8/S9 Plus</li>
<li>412x869 — 2% — Samsung Note10, Samsung S10+, OnePlus 6</li>
<li>412x892 — 2% — Samsung A30/A50/A50s, OnePlus 6T/7/7 Pro/7T Pro</li><li>414x896 — 5% — iPhone 11/11 Pro Max/XS Max/XR</li>
</ul>
|-
| style="text-align:center;" | || 393x786 || 3% || <ul>
<li>393x786 — 1% — Redmi Note 5, Pixel 3/3 XL</li>
<li>393x816 — 0,01% — Xiaomi Mi 6/8 SE</li>
<li>393x851 — 1% — Xiaomi Mi 9/10, Xiaomi Redmi Note 7/8/9</li>
</ul>
|-
| style="text-align:center;" | || 384x640 || 0.02% || Nexus 4 ⭐, LG Optimus L70 ⭐
|-
| style="text-align:center;" | <big>3</big> || '''375x667''' || 12% || <ul>
<li>'''375x667 — 8% — iPhone 6/6S/7/8 ⭐'''</li>
<li>375x812 — 4% — iPhone X/XS/11 Pro ⭐</li>
</ul>
|-
| style="text-align:center;" | <big>1</big> || '''360x640''' || 40% || <ul>
<li>360x567 — Nexus 5 ⭐</li>
<li>'''360x640 — 23% — Samsung Galaxy S5/S7, Samsung Note 3/II/S III, Moto G4 ⭐, BlackBerry Z30, Microsoft Lumia 950 ⭐'''</li>
<li>360x720 — 5% — Samsung A6s, LG G6, LG Stylo 4/5, LG K40, HTC U11/12, Huawei Mate 10 Lite, Honor 7X</li>
<li>360x740 — 3% — Samsung Galaxy S8/S9, Samsung Note 8/9</li>
<li>360x760 — 5% — Samsung Galaxy S10, Huawei P20 lite, LG W30/K50, HTC Desire 19s, HTC Wildfire X</li>
<li>360x780 — 4% — LG K61/G7/G8, Moto G8, Huawei Mate 20/Mate 30/Y9/Nova 7 Pro/P40/P30 Pro, Honor 8X</li>
<li>360x800 — 0,3% — Samsung S20, Huawei Nova 6/7 SE, LG K51S</li>
</ul>
|-
| style="text-align:center;" | <big>4</big> || '''320x568''' || 3% || <ul>
<li>320x480 — 0,02% — iPhone 4/4S/3G/3GS/2G ⭐</li>
<li>320x533 — 0.002% — Nokia Lumia 520 ⭐</li>
<li>320x534 — 1% — Galaxy S, LG</li>
<li>'''320x568 — 2% — iPhone 5/5S/5C/SE ⭐'''</li>
<li>320x570 — 1% — LG K7, ZTE Maven 3, ZTE Majesty Pro</li>
</ul>
|-
| style="text-align:center;" | || 240x320 || 0.04% || JioPhone 2 ⭐
|}

== ТОП разрешений экранов с расшифровкой устройств ==

По данным http://ru.screenresolution.org/ на июль 2020 года.

[[Файл:Статистика разрешений 01-10.png|без]]

[[Файл:Статистика разрешений 11-20.png|без]]

[[Файл:Статистика разрешений 21-35.png|без]]

== Как узнать viewport конкретного мобильного устройства ==

На сайте https://yesviz.com/ находим модель телефона и проверяем Viewport.

Пример: у клиента Samsung A50.

Физическое разрешение, которое указывает производитель: 1080 x 2340 PX

Если его указать в Хроме или Фотошопе, получается очень большой экран. Это из-за того, что плотность пикселей у этого Самсунга — 403 ppi, что значительно больше, чем обычное 72 ppi мониторов.

Смотрим параметры Samsung A50 здесь: https://yesviz.com/devices/a50/

Viewport: 412 x 892 PX - это то, что нужно указывать в Хроме и получается реалистично.

== Размеры элементов интерфейса ==

Разрешение экрана, которое видно в статистике — это чистый размер экрана без учета таких элементов интерфейса, как:

* заголовок окна браузера,
* панель с адресом сайта,
* панель закладок,
* полоса прокрутки,
* панель задач операционной системы.

Для корректного тестирования сайта в сервисах, которые имитируют разные разрешения, нужно вычитать из размера разрешения суммарный размер элементов интерфейса.



[[Файл:Chrome-Windows10-800x600.png|без]]

<gallery>
Файл:Firefox-Windows10-800x600.png|Mozilla Firefox
Файл:Opera-Windows10-800x600.png|Opera
Файл:Edge-Windows10-800x600.png|Microsoft Edge
Файл:IE11-Windows10-800x600.png|Internet Explorer 11
</gallery>

Если в Windows стоит масштаб 125%, то размеры элементов интерфейса тоже увеличиваются. На примере Chrome:

[[Файл:Chrome-Windows10-125pct.png|без]]

{| class="wikitable"
|-
! Браузер !! Высота интерфейсных элементов !! Ширина интерфейсных элементов
|-
| Google Chrome || 143 || 17
|-
| Mozilla Firefox || 142 || 16
|-
| Opera || 141 || 55
|-
| Microsoft Edge || 145 || 16
|-
| Internet Explorer 11 || 148 || 16
|-
| Google Chrome 125% || 179 || 21
|}

Исходя из популярности браузеров, рекомендуем ориентироваться на отнимаемый размер элементов интерфейса:

* нормальный масштаб — 145 пикселей по высоте (Edge) × 17 пикселей по ширине (Chrome)
* масштаб 125% — 179 пикселей по высоте × 21 пиксель по ширине

Соответственно, если нужно сымитировать просмотр сайта на определенном размере экрана, нужно указывать следующие размеры ViewPort (для простоты — без учета полосы прокрутки):

{| class="wikitable"
|-
! Разрешение !! ViewPort || Комментарий
|-
| '''1920×1080''' || '''1920×935''' ||
|-
| 1600×900 || 1600×755 ||
|-
| '''1536×864''' || '''1536×685''' || 1920×1080 с масштабом 125%
|-
| 1440×900 || 1440×755 ||
|-
| '''1366×768''' || '''1366×623''' ||
|-
| 1280×1024 || 1280×879 ||
|}

== Готовый HTML код ==

=== Тэг <picture> ===

⭐ — такое устройство есть в Google Chrome Inspector; 
🖐 — устройство с этим разрешением нужно добавлять вручную.

<source lang="html5">
<picture>









<source media="(max-width: 320px)"
srcset="/img/w320/picture.png,
/img/w320/picture@2x.png 2x">



<source media="(max-width: 375px)"
srcset="/img/w375/picture.png,
/img/w375/picture@2x.png 2x">




<source media="(max-width: 414px)"
srcset="/img/w414/picture.png,
/img/w414/picture@2x.png 2x">






<source media="(orientation: portrait) and (max-width: 600px)"
srcset="/img/w600/picture.png,
/img/w600/picture@2x.png 2x">


<source media="(orientation: portrait) and (max-width: 768px)"
srcset="/img/w768/picture.png,
/img/w768/picture@2x.png 2x">



<source media="(orientation: portrait) and (max-width: 834px)"
srcset="/img/w834/picture.png,
/img/w834/picture@2x.png 2x">


<source media="(orientation: portrait) and (min-width: 1024px)"
srcset="/img/w1024/picture.png,
/img/w1024/picture@2x.png 2x">








<source media="(orientation: landscape) and (max-height: 720px)"
srcset="/img/h720/picture.png">


<source media="(orientation: landscape) and (max-height: 768px)"
srcset="/img/h768/picture.png">


<source media="(orientation: landscape) and (max-height: 800px)"
srcset="/img/h800/picture.png,
/img/h800/picture@2x.png 2x">


<source media="(orientation: landscape) and (max-height: 864px)"
srcset="/img/h864/picture.png,
/img/h864/picture@2x.png 2x">



<source media="(orientation: landscape) and (max-height: 900px)"
srcset="/img/h900/picture.png,
/img/h900/picture@2x.png 2x">


<source media="(orientation: landscape) and (max-height: 960px)"
srcset="/img/h960/picture.png,
/img/h960/picture@2x.png 2x">



<source media="(orientation: landscape) and (max-height: 1080px)"
srcset="/img/h1080/picture.png,
/img/h1080/picture@2x.png 2x">



<source srcset="/img/h1200/picture.png,
/img/h1200/picture@2x.png 2x">

<img class="img-fluid" src="/img/h1080/picture.png">
</picture>
</source>

=== Media Query SCSS ===

См. [[Media]]

== Тестирование ==

Тестирование поведения сайта при разных разрешениях:

* https://quirktools.com/screenfly/
* http://www.infobyip.com/testwebsiteresolution.php

----

Несколько на одной картинке:

* http://ami.responsivedesign.is/ — показывает живой сайт на одной картинке в 4 устройствах

Несколько на одной странице:

* http://www.responsinator.com/ — показывает на одной странице сайт в 5 самых популярных телефонах и планшетах, сразу вертикально и горизонтально. Есть bookmarklet. Есть ссылка вида: http://www.responsinator.com/?url=https://beta.zina.design/
* http://responsive.pixeltuner.de/ — показывает на одной странице сайт в 5 самых популярных телефонах и планшетах. Есть ссылка вида http://responsive.pixeltuner.de/?s=https%3A%2F%2Fbeta.zina.design%2F#mobile480

Универсальные:

* http://lab.maltewassermann.com/viewport-resizer/ — bookmarklet
* https://responsivedesignchecker.com/ — есть ссылка с параметрами вида: https://responsivedesignchecker.com/checker.php?url=https%3A%2F%2Fbeta.zina.design%2F&width=1400&height=700. Размеры бОльшие, чем имеющийся экран, показывает в масштабированном виде.
* http://responsivetesttool.com/ — ссылки нет. Размеры бОльшие, чем имеющийся экран, показывает в реальном масштабе, с прокруткой.
* https://designmodo.com/responsive-test/ — ссылки нет
* https://www.duplichecker.com/screen-resolution-simulator.php — ссылки нет

На реальном железе и софте:

* https://www.browserstack.com/responsive?ref=lf-responsive-design-start-resposnive-design-testing-top — платный, дорогой, но на реальных устройствах. Бесплатному триальному аккаунту дается 30 минут по 1 минуте на дестопы и 30 минут на мобильники.

В [[VirtualBox]]:

{| class="wikitable"
|-
| '''1920×1080''' || VBoxManage controlvm "Windows 10" setvideomodehint 1920 1080 32
|-
| 1680×1050 || VBoxManage controlvm "Windows 10" setvideomodehint 1680 1050 32
|-
| 1600×900 || VBoxManage controlvm "Windows 10" setvideomodehint 1600 900 32
|-
| '''1536×864''' || VBoxManage controlvm "Windows 10" setvideomodehint 1536×864 32
|-
| '''1366×768''' || VBoxManage controlvm "Windows 10" setvideomodehint 1366 768 32
|-
| 1280×1024 || VBoxManage controlvm "Windows 10" setvideomodehint 1280 1024 32
|-
| '''1024×768''' || VBoxManage controlvm "Windows 10" setvideomodehint 1024 768 32
|-
| 800×600 || VBoxManage controlvm "Windows 10" setvideomodehint 800 600 32
|-
| '''360×640''' || VBoxManage controlvm "Windows 10" setvideomodehint 360 640 32
|}

== Размеры Bootstrap ==

Ширина контейнера, в который помещается содержимое сайта:

* основной макет — 1170 px (экраны больше 1200 px)
* для средних десктопов — 970 px (экраны от 992 до 1199 px)
* для планшетов — 750 px (экраны от 768 до 991 px)
* для телефонов — 288 px («резиновый» макет от 288 до 750 px для экранов от 305 до 767 px)

Подробнее см. [[Bootstrap]]

== Масштабирование ==

Дизайн сайта нужно делать с учетом, что его будут смотреть на таких устройствах:

# Нетбуки, ноутбуки и мониторы — от 10" до 27", от 1024×600 до 2560x1440 пикселей
# Планшеты — от 7" до 8,9", от 533×853 до 800×1280 пикселей
# Мобильники — от 320×240 до 360×640 пикселей

'''Апрель 2018'''

По данным [http://ru.screenresolution.org/ screenresolution.org]

{| cellpadding="10" border="1" style="border-collapse:collapse"
|-
| Размер || Популярность || Пропорция
|-
| 1366x768 || 17.53% || 16:9 (1,78)
|-
| 1920x1080 || 13.23% || 16:9 (1,78)
|-
| 360x640 || 10.04% || 16:9 (1,78)
|-
| 1280x1024 || 4.35% || 5:4 (1,25)
|}

По данным [https://www.w3schools.com/browsers/browsers_display.asp w3schools.com]

{| cellpadding="10" border="1" style="border-collapse:collapse"
|-
| Размер || Популярность || Пропорция
|-
| 1366x768 || 34% || 16:9 (1,78)
|-
| 1920x1080 || 18% || 16:9 (1,78)
|-
| 1280x1024 || 4% || 5:4 (1,25)
|-
| 1280x800 || 3% || 8:5 (16:10, 1,6)
|-
| 1024x768 || 2% || 4:3 (1,33)
|}

'''Вывод'''

1. Главный дизайн нужно рисовать под разрешение 1280×800 пикселей — это 13" ноутбук и примерно 80 % пользователей, включая пользователей с бОльшими размерами экрана. При этом учитывать, что дизайн (фон) должен смотреться хорошо на размерах 1920х1200 (24", 15% пользователей) и вплоть до 2560x1440 (27", 1 % пользователей).

2. После главного дизайна делать уменьшенные версии в такой последовательности:

* горизонтальный 1024×768 — для 10 % пользователей с 10" и 12" нетбуками и старыми мониторами, а также для планшетов iPad, Kindle Fire HD, Samsung Galaxy Tab
* вертикальный 533x853 — для всех планшетов
* вертикальный 320x480 — для iPhone и Андроидов

== См. также ==

* https://www.mydevice.io/
* https://dpi.lv/
* [[Размеры картинок]]

[[Категория:Дизайн]]

Размеры разрешений экранов - Історія редагувань

Romych в 12:59, 30 жовтня 2020