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

**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，分别产生 4 / 3、1 和 2 / 3;

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

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

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

html

android

viewport

android-webview