Соотношения пикселей: применяются ли "поддельные" значения пикселей на устройствах высокого разрешения ко всем свойствам ширины или только к выбранным?

Question

Я делаю немного CSS для интернет-магазина, который полностью живет в веб-обзоре мобильного приложения для Android и iOS. Я использую медиа-запросы, чтобы различать телефоны и планшеты.

Я нашел способ сохранить мои правила простыми: есть "телефонный" макет, который применяется ко всему с шириной устройства менее 768 пикселей. Все остальное - макет планшета. Это отлично работает для моих целей.

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

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

К счастью, производители ОС и устройств опередили эту проблему, и значения пикселей теперь намного меньше, чем фактическое количество пикселей. Там есть свойство под названием device-pixel-ratio который имеет значения, такие как 1,5 или 2,0 или 3,0 на новых устройствах: только при умножении сообщаемых пикселей на это соотношение вы получаете количество фактических пикселей.

Отлично.

Теперь мне интересно: применима ли эта настройка ("поддельных" размеров пикселей) ко всем значениям CSS на основе пикселей? В частности, это относится ко всем свойствам ниже:

• width
• device-width
• min-width
• min-device-width
• max-width
• max-device-width(и то же самое для высоты)

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

РЕДАКТИРОВАТЬ:

Крис объясняет в своем ответе, что гипотетическое устройство 700x900px с отношением пикселей к устройству 2 сообщит "350px" для width и "700px" для device-width, Так что, если бы я хотел сделать медиа-запрос, который сгруппировал бы это устройство с другими устройствами размером с телефон, и что-нибудь с iPad или шириной или выше как планшет, это был бы правильный медиа-запрос...

@media only screen and (max-device-width: 767px) { /* Phone-sized styling */}

@media only screen and (min-device-width: 768px) { /* Tablet-sized styling */}

(Да, я знаю, что orientation свойство также вступает в силу здесь для устройств iOS, но давайте на секунду проигнорируем это)

Answer 1

Высота и ширина устройства в CSS относятся к физическим пикселям экрана, а не к пикселям CSS, как определено device-pixel-ratio,

Так, например, если у телефона было разрешение 700 х 900 и device-pixel-ratio из 2, физическая ширина пикселя будет 700px, но ширина CSS-пикселя будет 350px. Это будет означать, что width: 350px; а также device-width: 700px; будет точно такой же размер на этом экране.

Надеюсь, это поможет!