Question

我的genymotion模拟器是Google Nexus7 -4.1.1 API16-800 * 1280。当我使用webview在Android上加载HTML5时，我对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有关吗？谢谢！

Answer 1

如果可能，您应该避免使用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，产生{ {1}}，4 / 3和1;

然后通过除以计算值来缩放CSS宽度。在您的情况下，未缩放的CSS宽度为602 2 / 3。还有一些有趣的舍入调整，这就是为什么某些单位可以取消结果的原因。

target-densitydpi与使用Android H5的window.innerWidth之间的关系是什么

1 个答案: