Блог

Из-за увеличения плотности пикселей, особенно в портативных устройствах, но также и в ноутбуках, имеет ли смысл определять точки останова для адаптивного CSS с использованием дюймов?

Например, если у меня по умолчанию используется макет для мобильных устройств и я хочу отдельно указать стили для 15,6-дюймового ноутбука и дисплеев большего размера, имеет ли смысл использовать @media (минимальная ширина: 13 дюймов)? (диагональ экрана 15,6 дюйма = ширина 13 дюймов). Вызовет ли это какие-либо проблемы, хорошо ли это поддерживается? Интуитивно более разумно определять общий макет на основе абсолютного размера экрана, чем на количестве пикселей.

К сожалению, оказывается, что спецификация CSS определяет дюймы и миллиметры на основе пикселей. В CSS 1 дюйм = 2,54 см = 96 пикселей, так что это будет отображаться как 1 физический дюйм только на экранах с разрешением 96 ppi, но, например, iPhone X имеет 463 ppi, и если вы укажете что-то в CSS на ширину = 1 дюйм; физический экран будет иметь ширину всего 0,2 дюйма!