Device pixel ratio или как измерить физические пиксели в логические?

Question

[Alexey]

Создаю респонсивный блок который должен занимать 92% от видимой области экрана.
При изменении ширины экрана, пиксели измеряются корректно. Но, это не 92% видимой области экрана. Я знаю что есть понятия физических и логических пикселей или Device Pixel Ratio.

Вопрос:
Как в JavaScript осуществить конвертирование пикселей которые у меня получаются (92% от общей ширины видимого! экрана) c учетом пикселей устройства?

Ширина видимой части экрана:
window.screen.availWidth;

Ширина блока (92%):
(92 / 100) * width

Answer 1

[GreatRash]

251 / 271 ~= 0.92 - ну и чо не так?

Comments

[Alexey]

Что вы получили?

[Alexey]

В пикселях устройства - это 180 пикселей приблизительно. Посмотрите на мой скриншот

[GreatRash]

Alexey, видимо я что-то не понял. Ну а нафига считать ширины руками? Почему не сказать в CSS прямо - 92%, и пусть браузер сам считает?

[Alexey]

Логичный вопрос.
Проблема в том что в данном случае блок будет встраиваемым во многие сайты, которые могут иметь различную структуру. В моем случае интересует непосредственно мобильная версия при условии того что сайт имеет горизонтальный скролл. Из-за этого если сделать 92% ширину, блок возьмет ширину всего сайта но не видимой его части. Поэтому необходимо учитывать только видимую часть.

[GreatRash]

Alexey, алсо, в CSS есть единицы измерения - vw и vh (viewport width и viewport height). Может они вам подойдут? Работают с версии Android 4.4.

[Alexey]

Спасибо за наводку!