Разрешение области просмотра (правила CSS)
Это разрешение наиболее интересно дизайнерам и разработчикам, так как оно определяет точки останова и определение медиа-запросов. Обычно говорят только об этом разрешении.
Что касается iMac 24" (2021), она составляет:
- 2048 пикселей по ширине
- 1152 пикселей по высоте ⚠️ высота является ориентировочной, так как браузеры Safari, Chrome и т.д. уменьшают видимую область
ℹ️ Некоторые аналитические инструменты показывают только разрешение производителя (ниже), а не то, что представлено выше, поэтому будьте внимательны при интерпретации результатов.
Доступно в симуляторе
Проверьте ваш адаптивный сайт на iMac 24" (2021) благодаря расширению браузера.
Это бесплатно и активируется в 2 клика.
Плотность пикселей
На iMac 24" (2021) она составляет 2
Если вы хотите нацелиться в CSS на устройства с как минимум такой плотностью пикселей, вы можете использовать этот медиа-запрос.
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* CSS */
}
Также в javascript можно получить значение плотности пикселей.
window.devicePixelRatio
// Что вернет число 2
Разрешение производителя iMac 24" (2021)
Учитывая плотность пикселей, это дает:
- 4096 пикселей в ширину
- 2304 пикселей в высоту
Бесплатный макет HD в формате PNG
