使用Android H5时，目标密度and和window.innerWidth之间有什么关系？

Question

我的genymotion模拟器是Google Nexus7 -4.1.1API16- 800*1280。当我在Android上使用webview加载HTML5时，我搞不清目标密度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

我做了一些测试：

                                   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有关吗？谢谢!

Answer 1

如果可能，您应该避免使用target-densitydpi。这个属性是非标准的，实际上在Android WebView的现代版本中已经被弃用了。

粗略地说，target-densitydpi定义了CSS像素与屏幕像素比率的缩放系数。它的计算方法如下：

对于2 / 3;，

• 为1/设备比例因子；在您的示例中：device-dpi low-dpi、middle-dpi和high-dpi它不取决于设备特性，其计算公式为160分别除以120、160和240，得出4 / 3、1和120

然后通过除以计算值来缩放CSS宽度。在您的示例中，未缩放的CSS宽度为602 (800 / 1.33124...)。还有一些有趣的四舍五入调整，这就是为什么结果可能会被一些单位偏离的原因。