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

Question

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

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

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

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

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

Я имею в виду, если я хочу установить мой div 's width to 100px, это будет ровно 100 аппаратных пикселей даже на дисплеях Retina.

Answer 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 преобразование может привести к проблемам с сенсорной площадью не совпадая с элементом местоположение в представлении.

Answer 2

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

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

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

Кроме того, вы можете запросы средств массовой информации настройки для различных устройств DPI вы можете использовать min-resolution недвижимости в СМИ по этому пути:

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

Для замены старого min-device-pixel-ratio синтаксиса используйте:

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

Здесь source.

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

Answer 3

Вы можете использовать:

@media screen and (max-width: 300px) { /* To Do */ } 

ссылка визит: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 4

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

Чтобы получить ширину 100px широкий DIV:

var myDivWidth = 100/window.devicePixelRatio; 

Так на iPhone 5 с pixelRatio 2,0 вы будете иметь 50px широкий Див более чем в 100 физических пикселей.

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