What is the relationship between target-densitydpi and window.innerWidth with Android H5

Question

My genymotion emulator is Google Nexus7 -4.1.1 API16- 800*1280 . When I use webview to load HTML5 on Android, I was confused with the relationship between target-densitydpi and 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

I do some tests:

                                   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

How to calculate the window.inerWidth? Has something to do with window.devicePixelRatio? Thank you!

Solution

You should avoid using target-densitydpi if possible. This attribute is non-standard, and is actually deprecated in modern versions of Android WebView.

Roughly, target-densitydpi defines a scaling coefficient for CSS pixels to screen pixels ratio. It is calculated in the following way:

• for device-dpi, as 1 / device-scale-factor; in your case: 1 / (4/3) = 0.75;

• for low-dpi, middle-dpi and high-dpi it does not depend on the device characteristics, and is calculated as 160 divided by 120, 160 and 240, respectively, yielding 4 / 3, 1 and 2 / 3;

Then the CSS width is scaled by dividing on the calculated value. In your case, the unscaled CSS width is 602 (800 / 1.33124...). There also funny rounding adjustments involved, that's why the results can be off by some units.