2016-07-29 3 views
5

Современные телефоны и планшеты имеют очень высокое разрешение.Как работают контрольные точки на современных устройствах с высоким разрешением?

My Galaxy S7 Edge, например, имеет разрешение 1440 x 2560 пикселей.

Общие точки останова для мобильных устройств, по-видимому, составляют около 768 пикселей, например, в bootstrap.

Пример из bootstrap.css:

@media (min-width: 768px) { 
    .container { 
    width: 750px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
    width: 970px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
    width: 1170px; 
    } 
} 

Как это, что мой телефон отображает «отзывчивая» версия веб-сайты, даже если это разрешение, возможно, больше, чем большинство настольных мониторов? Из примера, казалось бы, мой телефон всегда будет отображать сайт в режиме «рабочий стол».

ответ

3

Из статьи A pixel is not a pixel is not a pixel ...

Я знаю, что веб-разработчики заинтересованы, однако. Им нужны пиксели CSS . То есть, «пиксели», которые используются в объявлениях CSS , таких как width: 300px или font-size: 14px.

Эти пиксели не имеют никакого отношения к фактической плотности пикселей устройства . Это, по сути, абстрактная конструкция, созданная специально для нас, разработчиков .

Проще всего объяснить, когда мы рассматриваем масштабирование. Если пользователь масштабирует в, элемент с width: 300px занимает все больше и больше экрана , и, таким образом, он становится шире и шире при измерении в устройстве (физических) пикселей. Однако в пикселях CSS ширина остается 300px, , а эффект масштабирования создается путем расширения CSS-пикселов, так как требуется .

Смотрите также:

Смежные вопросы