Разрешение экрана в веб-дизайне
Мартин Михалек – 16 августа 2018 г.
Пожалуйста, поделитесь: Facebook
Разрешение экрана не очень интересно с точки зрения веб-разработчика, потому что мы отображаем веб-сайты и адаптируем их к размеру окна браузера. Однако иногда это бывает удобно, и у нас, конечно, есть возможность измерить разрешение.
Реклама
Книга «CSS: современная верстка» New
Попрощайтесь с плавающей запятой и начните делать макет современным способом. Подробнее →
Полезно ли это?
Как я уже упоминал, разрешение экрана не так интересно для веб-пользователей. Когда я спросил в Твиттере, нужна ли кому-то такая штука на практике, я получил лишь несколько примеров. В основном люди использовали его для идентификации пользователя:
Нам было все равно, какое разрешение экрана используют люди. Но они использовали разрешение js вместе с отпечатком браузера, чтобы распознавать разные устройства, которые один и тот же человек использовал для подключения к учетной записи. Таким образом, мы могли отслеживать его поведение на разных устройствах. А это уже было очень интересно.
…ну, а потом еще и по разным древним мракобесам:
Считаются ли взломы 20-летней давности (Netscape Navigator 4), когда мы отображали страницы в полноэкранном режиме, используя так называемое безхромное окно и расширяя его на весь экран?
Чтобы быть уверенным, я напоминаю вам, что разрешение экрана бесполезно в адаптивном дизайне. Вам всегда нужно знать размер окна, потому что это то, к чему должен адаптироваться веб-дизайн.
Обнаружение с помощью JavaScript
Разрешение экрана
Находим разрешение экрана:
Будьте осторожны с этими значениями, они будут возвращать разные числа на разных устройствах. Например:
- браузеры на iOS 9 и 10 всегда возвращают значения для более короткой стороны (портрет),
- Android 4 возвращает аппаратное разрешение,
- Edge 14 возвращает что-то вроде clientWidth иclientHeight только с размерами ползунка.
Доступное разрешение
Разрешение экрана доступное для окон приложений, обычно без основной панели операционной системы, можно узнать следующим образом:
На десктопе значения availWidth или availHeight обычно немного меньше, на мобильных телефонах обе категории – полное и доступное разрешение – имеют одинаковые значения.
Попробуйте на CodePen: cdpn.io/e/gjNpYg
Осторожно, все в пикселях CSS
Напоминаю, что вы получите все числа в пикселях CSS, а не в аппаратном разрешении. Если вам нужны аппаратные пиксели, вы должны умножить их на значение преобразования devicePixelRatio. Например:
Обнаружение в CSS
Media Queries предлагает запросы о ширине и высоте разрешения экрана — min-device-width и min-device-height .
Просто для протокола. Но в CSS это еще менее полезно, чем в JavaScript. Гораздо интереснее ориентироваться на размер окна.
Кроме того, во время написания статьи я узнал, что W3C собирается удалить эти функции из спецификации. Я полностью отождествляю себя с этим. Мой источник — Mozilla Developer Network.
Статистика разрешения экрана
В Интернете полно статистических данных о разрешении экрана. Например, на июль 2018 г. Gemius приводит следующий рейтинг:
| Разрешение | Пропорция |
|---|---|
| 360 × 640 | 20,80% |
| 1366 × 768 | 15,63% |
| 1920 × 1080 | 13,47% |
| 1280 × 1024 | 4,58% |
| 1600 × 900 | 3,51% |
Нельзя не заметить, что здесь отсутствует почти половина пользователей. Да, разрешений экрана сегодня действительно много и в краткую табличную сводку не влезешь.
Full HD, 2K, 4K и другие обозначения
Это часто является предметом обсуждения, так что вот онопо порядку упомяну аббревиатуры, используемые для обозначения некоторых резолюций:
| Разрешение | Сокращение |
|---|---|
| 1024 × 768 | XGA/XVGA |
| 1280 × 720 | HD |
| 1920 × 1080 | Full HD |
| 2048 × 1080 | 2K |
| 3840 × 2160 | 4K |
Моим источником были Wikipedia и Mobilmania, где вы можете найти еще больше этих красивых аббревиатур.
Это также относится к разрешению видео или телевизорам, но это уже немного выходит за рамки нашей компетенции, если нас не интересуют HbbTV и смарт-телевизоры.
Это разрешение экрана. Гораздо интереснее наблюдать, как пользователи больших окон браузера получают доступ к вашим сайтам.
