Galaxy tab/nexus 7 上 chrome/mozilla 中的视口、目标密度 dpi、像素比行为

Posted 2023-04-18

【中文标题】Galaxy tab/nexus 7 上 chrome/mozilla 中的视口、目标密度 dpi、像素比行为

【英文标题】：Viewport, target-densitydpi, pixelratio behaviour in chrome/mozilla on galaxy tab/nexus 7

【发布时间】：2013-02-08 10:18:13

【问题描述】：

' 在不同的设备和浏览器上测试。两款平板电脑的物理分辨率均为 1280*800px。 Galaxy Tab 10" Nexus 7 7"。

Chrome + 设备 dpi 星系：viewportwidth 1279px，像素比 1，screen.width 1280 nexus7 : vp 1279px, pr 1.3312..., sw 1280 Chrome + 高 dpi 银河 : vp 1919px, pr 1, sw 1280 nexus7 : vp 1441px, pr 1.3312..., sw 1280 Chrome + 低 dpi 银河 : vp 959px, pr 1, sw 1280 nexus7 : vp 720px, pr 1.3312..., sw 1280 现在使用 Firefox (15/19) + 银河：vp 1280px，pr 未定义，sw 1280 nexus7 : vp 853px, pr 1, sw 1280

853px 是 1280 * 2/3。

现在将宽度属性更改为任何离散值，例如 1280 并删除比例边界，两个平板电脑的视口均为 1280。 将宽度留空或设置为“自动”会导致视口结果 星系：vp 980px，公关未定义，sw 1280 nexus7 : vp 980px, pr 1, sw 1280

谁能给我解释一下？ Mozilla 不支持 target-densitydpi。 所以它没有任何作用。 我认为 18 之前的 Mozilla 版本中未定义像素比？ 1）mozilla 是在基于android 的nexus 上缩放2/3 还是mozilla 的“功能”？ 2) 980px 是从哪里来的？它与将“auto”设置为宽度相同。但是为什么两个设备的 viewport.width 都是 980 呢？ W3C 的一些默认设置？

【参考方案1】：

980px 是 Apple 选择用于创建视口的图形，以便它可以在 iphone 上合理呈现大部分网络（在启动时像素数量要少得多）。

除非您的目标是 Android 浏览器（我不建议这样做），否则视口中的目标密度将被忽略，并且在所有其他浏览器中根本不使用（据我所知）。我们当然不再支持它在 Chrome 中，你不应该包含它或期望它工作。也没有其他人支持视口中的目标密度，WebKit 不会也不会继续支持它。

screen.width 报告了一个不同的值，它是 (1 / devicePixelRatio) * 实际物理宽度的缩放值，因此 nexus 7 为 800 像素（纵向实际像素），像素密度为 1.33，相当于1/1.33 * 800 = 601 css 像素。

每个渲染引擎处理视口的方式都不同，但越来越一致。如果 Gecko 没有 pixleRation，那是因为他们没有实现它。

【参考方案2】：

viewport target densitydpi support is being deprecated

【讨论】：

谢谢。我知道。但是壁虎甚至从未支持目标密度dpi，对吗？我仍然想了解它在 webkit 中应该如何工作。

在你的链接中说应该使用 。我就是做这个的。导致 Nexus 7 (gecko) 上为 853px，Galaxy10.1 (gecko) 上为 1280px，而 Nexus 7 (chrome) 上为 960px，Galaxy10.1 (chrome) 上为 1279px。另外，chromes 的宽度在重新加载之前会受到用户缩放的影响。