Какая связь между target-densitydpi и window.innerWidth с Android H5

Мой эмулятор genymotion - Google Nexus7 -4.1.1 API16- 800 * 1280. Когда я использую webview для загрузки HTML5 на Android, меня смущала связь между target-densitydpi и window.innerWidth.

<meta name="viewport" content="width=device-width,**target-densitydpi=device-dpi**,initial-scale=1.0,minimum=1.0,maximum-scale=1.0,user-scalable=no">

$(function(){alert(window.innerWidth);   //get the viewport width
          alert(window.devicePixelRatio);})  //  always is 1.3312499523162842  no matter what target-densitydpi is

Я провожу несколько тестов:

                                   window.innerWidth

**target-densitydpi=device-dpi:** 800

**target-densitydpi=low-dpi:** 452

**target-densitydpi=middle-dpi:** 602

**target-densitydpi=high-dpi:** 909

**ignore target-densitydpi:** 602

Как рассчитать window.inerWidth? Имеет какое-то отношение к window.devicePixelRatio? Спасибо!


android html android-webview viewport
person Jim Green    schedule 30.07.2015    source источник

Ответы (1)


arrow_upward
4
arrow_downward

По возможности следует избегать использования target-densitydpi. Этот атрибут нестандартный и фактически не рекомендуется в современных версиях Android WebView.

Грубо говоря, target-densitydpi определяет коэффициент масштабирования для соотношения пикселей CSS и пикселей экрана. Он рассчитывается следующим образом:

  • для device-dpi как 1 / масштабный коэффициент устройства; в вашем случае: 1 / (4/3) = 0.75;

  • для low-dpi, middle-dpi и high-dpi он не зависит от характеристик устройства и рассчитывается как 160, деленное на 120, 160 и 240, соответственно, что дает 4 / 3, 1 и 2 / 3;

Затем ширина CSS масштабируется путем деления на вычисленное значение. В вашем случае немасштабированная ширина CSS составляет 602 (800 / 1.33124...). Также задействованы забавные настройки округления, поэтому результаты могут отличаться на некоторых единицах.

person Mikhail Naganov    schedule 30.07.2015
comment
Спасибо за ваш ответ. У меня есть следующие вопросы: как вы сказали, 452 = (800 / (4/3))? не правильно ! а как рассчитывается 909? Что-то не так с масштабным коэффициентом? - person Jim Green; 31.07.2015
comment
Я не сказал 452 = (800 / (4/3)), я сказал 452 ~ (602 / (4/3)). 909 ~ (602 / (2/3)). 602 - немасштабированная ширина CSS. - person Mikhail Naganov; 31.07.2015
comment
Вы сказали: для устройства-dpi как 1 / масштаб-коэффициент устройства; в вашем случае: 1 / (4/3) = 0,75, но почему коэффициент масштабирования устройства равен 4/3 ?? И почему 602 (800 / 1,33124 ...) - немасштабированная ширина CSS? почему 800 не является немасштабированной шириной css? Спасибо! - person Jim Green; 31.07.2015
comment
коэффициент масштабирования устройства составляет 4/3 - это примерно то же самое, что window.devicePixelRatio, которое, как вы сообщали, было 1,33 ..... Мой хороший вам совет - прочитать эту классическую статью quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html о взаимосвязи между CSS и физическим пикселей экрана, это должно объяснить, почему в вашем случае ширина CSS составляет 600 пикселей. - person Mikhail Naganov; 31.07.2015
comment
Благодарю за ответ. Все мы знаем, что window.devicePixelRatio = pixel / dip, dip означает независимый от устройства пиксель. Кажется, что window.devicePixelRatio нельзя контролировать. ** и некоторые устройства показывают, что window.devicePixelRatio = 2 **, почему? Установлено ли window.devicePixelRatio производителем? - person Jim Green; 01.08.2015
comment
Да, devicePixelRatio зависит от плотности экрана устройства и не может быть изменен. - person Mikhail Naganov; 02.08.2015