android - target-densitydpi和window.innerWidth与Android H5有什么关系

Question

我的 genymotion 模拟器是 Google Nexus7 -4.1.1 API16- 800*1280 。当我在Android上使用webview加载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

**忽略目标密度dpi:** 602

如何计算window.inerWidth？与window.devicePixelRatio有关吗？谢谢!

Answer 1

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

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

• 对于 device-dpi，为 1/device-scale-factor；在你的例子中:1/(4/3) = 0.75;

• low-dpi, middle-dpi 和 high-dpi 不依赖于设备特性，而是计算为 160 除以 120、160 和 240，分别得到 4/3、1 和 2/3；

  /li>

然后通过除以计算值来缩放 CSS 宽度。在您的例子中，未缩放的 CSS 宽度为 602 (800/1.33124...)。还涉及有趣的舍入调整，这就是为什么某些单位的结果可能会有所偏差。