Доступ к аппаратным пикселям на мобильных устройствах

Информация для уточнения терминологии здесь.

Аппаратный пиксель: физический пиксель на дисплее. Например, iPhone 5 имеет экран с 640 горизонтальными аппаратными пикселями.

Не зависящий от устройства пиксель (dip): масштабирование пикселей устройства в соответствии с равномерным опорным пикселем на нормальном расстоянии просмотра, что должно быть примерно одинакового размера на всех устройствах. IPhone 5 - 320 провалов широкий.

CSS pixel: единица, используемая для макета страницы, контролируемого окном просмотра. Размеры пикселей в стилях, таких как ширина: 100 пикселей, указаны в CSS пиксели. Отношение пикселей CSS к независимым от устройства пикселам масштаб страницы или масштабирование.

Есть ли способ установить связь между аппаратным пикселем и пикселем CSS, как 1:1.

Я хочу сказать, что если я хочу установить ширину div <100% > , она будет ровно 100 аппаратных пикселей даже на дисплеях Retina.

Ответы

Ответ 1

Экранный масштабный коэффициент (Retina, в настоящее время 2x или 3x) отличается от масштабного коэффициента страницы. При одном и том же масштабном коэффициенте страницы 1px будет представлять собой пиксели 1x1, 2x2 или 3x3, в зависимости от дисплея (Retina).

Похоже на то, что вы хотите сделать, - это управлять экраном с "родным" разрешением, которое бы показало, что оно имеет 2x или 3x количество пикселей, но на (не-сетчатой) экранной шкале 1.

Для этого вам нужно будет преобразовать представление, умножив его размер на коэффициент масштабирования экрана, а масштабируя его с помощью инверсного коэффициента экрана.

Вы можете установить головку <meta name="viewport" content="width=device-width-times-2, initial-scale=0.5">, но ваш контент будет гораздо менее читабельным и резким.

Если вы хотите сделать это на основе элемента, вы можете установить

-webkit-transform-style: preserve-3d;
-webkit-transform: scale3d(0.5,0.5,0.5);

3d необходимо, так как преобразование 2d может привести к проблемам с сенсорной областью, не соответствующей местоположению элемента в представлении.

Ответ 2

Я думаю, вы можете использовать device-width свойства min-device-width и max-device-width для доступа к аппаратным пикселям. device-width - описывает ширину устройства вывода. Например:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }

Здесь вы можете найти для них карту стандартных устройств и медиа-запросов.

Кроме того, вы можете настроить медиа-запросы для разных устройств DPI, вы можете использовать свойство min-resolution на носителе следующим образом:

@media print and (min-resolution: 300dpi) { ... }

Чтобы заменить старый синтаксис min-device-pixel-ratio, используйте это:

@media screen and (min-resolution: 2dppx) { ... }

Вот источник .

В принципе, в четком CSS вы не можете получить доступ к аппаратным пикселям. Вы можете просто оптимизировать страницы для разных разрешений.

Ответ 4

Если вам нужна точная взаимосвязь, я не думаю, что вы можете сделать это в CSS. Но вы можете сделать это в JS:

Чтобы получить ширину div шириной 100 пикселей:

var myDivWidth = 100 / window.devicePixelRatio;

Итак, на iPhone 5 с pixelRatio 2.0 вы будете иметь ширину div шириной 50 пикселей на 100 физических пикселей.

Вы можете сделать то же самое с css transform:scale(0.5), если хотите также уменьшить содержимое div.