Sass MediaScreen — Определяем девайсы на CSS

Я считаю, что в последнее время разница размера экранов между разными группами устройств всё больше размывается. Не смотря на это я попытался написать инструмент для определения, как групп устройств (мобильники, планшеты, лаптопы, десктопы), так и конкретных девайсов (iPhone 5, iPhone X, iPad Pro 12 и т.д.). Получилась, на мой взгляд, довольно удобная пачка SASS-миксинов. И что немаловажно, инструмент прост в использовании, а также позволяет расширять список устройств своим без правки исходников.

Демку потыкать можно тут.

Сразу пара оговорочек:

Не проверяйте адаптивность в браузерном DevTools, там неправильно расчитываются размеры сторон в ландшафтной ориентации устройства. Проверять лучше на реальном устройстве или в симуляторе (например, xCode Simulator).
Используйте group-css-media-queries для объединения одинаковых медиа запросов. Без него генерируется много повторяющегося кода @media ..., если ради удобства использовать миксин @include device() в каждом селекторе отдельно. Обёртка для Gulp - gulp-group-css-media-queries.

Установка

Скачиваем библиотеку:

bash

$ yarn add sass-mediascreen
или
$ npm install sass-mediascreen
или
$ curl -O https://raw.githubusercontent.com/gvozdb/sass-mediascreen/master/_mediascreen.scss

И подключаем миксины в наше приложение:
@import "mediascreen";

Примеры

Вот так можно проверять конкретные устройства:

scss

@include device(iPhone5, portrait) {
    // portrait orientation
    // iPhone 5, iPhone 5s, iPhone 5c, iPhone SE
}
@include device(iPhone6Plus iPhoneXR, landscape) {
    // landscape orientation
    // iPhone 6+, iPhone 6s+, iPhone 7+, iPhone 8+, iPhone XR
}
@include device(iPadPro10 iPadPro11 iPadPro12) {
    // all orientations
    // iPad Pro 10.5, iPad Pro 11, iPad Pro 12.9
}

Вот так группы устройств:

scss

@include device(desktop) {
    // all orientations
    // desktop
}
@include device(mobile tablet laptop, landscape) {
    // landscape orientation
    // mobile, tablet, laptop
}
@include device(mobile-landscape tablet laptop) {
    // landscape orientation
    // mobile

    // all orientations
    // tablet, laptop
}
@include device(mobile-landscape tablet laptop, portrait) {
    // landscape orientation
    // mobile

    // portrait orientation
    // tablet, laptop
}

А это стандартные миксины для проверки размеров экрана (от, до) и текущей ориентации устройства:

scss

@include screen(min-width, max-width, orientation) { /*...*/ }
@include min-screen(width) { /*...*/ }
@include max-screen(width) { /*...*/ }

@include screen-height(min-height, max-height, orientation) { /*...*/ }
@include min-screen-height(height) { /*...*/ }
@include max-screen-height(height) { /*...*/ }

@include landscape() { /*...*/ }
@include portrait() { /*...*/ }

Список поддерживаемых устройств

Группы

Мобильники 320-767px - mobile, mobile-portrait, mobile-landscape
Планшеты 768-1023px - tablet, tablet-portrait, tablet-landscape
Лаптопы 1024-1199px - laptop, laptop-portrait, laptop-landscape
Десктопы >=1200px - desktop, desktop-portrait, desktop-landscape

Телефоны

iPhone 5, 5s, 5c, SE - iphone5, iphone5s, iphone5c, iphonese
iPhone 6, 6s, 7, 8 - iphone6, iphone6s, iphone7, iphone8
iPhone 6+, 6s+, 7+, 8+ - iphone6plus, iphone6splus, iphone7plus, iphone8plus
iPhone X, XS, 11 Pro - iphonex, iphonexs, iphone11pro
iPhone XR, 11 iphonexr, iphone11
iPhone XS Max, 11 Pro Max iphonexsmax, iphone11promax
iPhone 12, 12 Pro, 13, 13 Pro iphone12, iphone12pro, iphone13, iphone13pro
iPhone 12 mini, 13 mini iphone12mini, iphone13mini
iPhone 12 Pro Max, 13 Pro Max iphone12promax, iphone13promax

Планшеты

iPad 1, 2, Mini, Air - ipad1, ipad2, ipadmini, ipadair
iPad 3, 4, Pro 9.7" - ipad3, ipad4, ipadpro9
iPad Pro 10.5" - ipadpro10
iPad Pro 11.0" - ipadpro11

Лаптопы

iPad Pro 12.9" - ipadpro12
Увы, по размерам экрана, iPad Pro 12 - это лаптоп!

Расширение списка устройств

Как я говорил ранее, можно добавлять поддержку кастомных девайсов или групп устройств без правки исходников библиотеки. Для этого, перед импортом @import "mediascreen", нужно объявить Sass-переменную $ms-devices со списком своих девайсов:

scss

$ms-devices: (
    desktop-sm: (
        group: true, // флаг означает - группа девайсов
        min: 1200px,
        max: 1919px,
    ),
    desktop-md: (
        group: true,
        min: 1920px,
        max: 2879px,
    ),
    desktop-lg: (
        group: true,
        min: 2880px,
    ),
    pixel2xl: (
        group: false, // флаг означает - конкретный девайс
        width: 411px, // or 412px?..
        height: 823px,
        pixel-ratio: 3.5,
    ),
    macbook12: (
        group: false,
        orientation: landscape,
        width: 1440px,
        height: 900px,
        pixel-ratio: 2,
    ),
    imac27: (
        group: false,
        orientation: landscape,
        width: 5120px,
        height: 2880px,
    ),
);
@import "mediascreen";

После этого проверять свои устройства можно также, как и стандартные устройства библиотеки:

scss

@include device(desktop-sm) {
    // desktop-sm
}
@include device(desktop-md) {
    // desktop-md
}
@include device(desktop-lg) {
    // desktop-lg
}
@include device(Pixel2XL, landscape) {
    // landscape orientation
    // Google Pixel 2XL
}
@include device(MacBook12) {
    // landscape orientation
    // MacBook 12
}
@include device(iMac27) {
    // landscape orientation
    // iMac 27
}

Ссылки

Библиотека на GitHub
Библиотека в репозитории Npm
Демо страничка