Почему СМИ работают на экране телефона?

Question

Разрешение моего телефона 2280х1080. Почему следующий код меняет цвет фона на синий на моем телефоне?

@media (max-width: 500px) { body { background-color: blue; } }

Интересно, что он перестает работать после включения "режима компьютера". Подтверждено для предварительного просмотра chrome и firefox.

Answer 1

Ну, эта топика c довольно широка с моей точки зрения, но я могу дать вам общий ответ.

Во-первых, я очень думаю, что вы хотели сказать 1080x2280. Это вводит в заблуждение, если вы сначала не указали ширину .

Разрешение вашего телефона выражается в количестве физических пикселей. Значения, используемые CSS, на самом деле называются логическими пикселями. Логические пиксели представляют собой в основном физические пиксели, разделенные на ваше устройство DPR (Device Pixel Ratio).

Следовательно, Viewport вашего браузера будет иметь размер 360x760, если вы владеете устройством как Samsung Galaxy S10, который имеет DPR 4.

Отличное видео на этой топи c: Пиксельная плотность, демистифицировано

Физические пиксели против логических: https://blog.specctr.com/pixels-physical-vs-logical-c84710199d62

Answer 2

Если ваш телефон имеет ширину 1080 пикселей, то device-width - это физические пиксели на экране. Если device-pixel-ratio этого телефона, например, 3, это означает, что каждый "css пиксель" равен 3х3 пикселя устройства. max-width: 500px в медиа-запросе относится к «css пикселям», то есть с отношением пикселей к устройству, равным 3, будет 1500 пикселей устройства. И ваш телефон будет иметь размер экрана 760x360 (css) пикселей.

Большое преимущество высокого отношения устройств к пикселям (Retina Display и аналогичных) заключается в том, что векторная графика, шрифты и высокое разрешение изображения будут отображаться с большей детализацией / лучшим разрешением. Но единица измерения пикселей в правилах CSS по-прежнему относится к "css пикселям", поэтому ваш фон синий / этот медиазапрос применяется.

Вы можете также использовать min-device-width / max-device-width в медиа-запросах. Однако для большинства целей лучше использовать max-width / min-width и думать / работать с «css пикселей»

PS: «компьютерный режим», о котором вы говорите, скорее всего, деактивируется или изменяется настройки в метатеге viewport.

Answer 3

Вы также должны набрать screen после слова media, чтобы проверить, чтобы экран медиазапросов мог проверять не только экраны W3 C Источник: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Так в вашем случае это будет:

@media screen and (max-width: 500px){ body { background-color: blue; } }