<'meta name="viewport"content="width=device-width initial-scale=1.0, maximum-scale=1.0, target-densitydpi=..., user-scalable=0"/>'
在不同的设备和浏览器上测试。两款平板电脑的物理分辨率均为 1280*800px。 galaxy tab 10"nexus 7 7"。
Chrome + 设备 dpi
galaxy : viewportwidth 1279px, pixel ratio 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
galaxy : vp 959px, pr 1, sw 1280
nexus7 : vp 720px, pr 1.3312..., sw 1280
现在使用 Firefox (15/19) +
galaxy : vp 1280px, pr undefined, sw 1280
nexus7 : vp 853px, pr 1, sw 1280
853px 是 1280 * 2/3。
现在将宽度属性更改为任何离散值，例如 1280
并移除比例边界，两台平板电脑的视口(viewport)均为 1280。
将宽度留空或设置为“自动”，Vieport 结果为
galaxy : vp 980px, pr undefined, sw 1280
nexus7 : vp 980px, pr 1, sw 1280
有人能给我解释一下吗？ mozilla 不支持 target-densitydpi。 所以它没有任何作用。 我认为在 18 之前的 mozilla 版本中 pixelratio 是未定义的？ 1) mozilla 是在基于 android 的 nexus 上按 2/3 缩放还是它是 mozilla 的“功能”？ 2)980px从哪里来？它与将“自动”设置为宽度相同。但是为什么这两个设备的 viewport.width 都是 980 呢？一些来自 W3C 的默认设置？
最佳答案
980px 是 Apple 选择用来创建视口(viewport)的一个数字，以便它可以在 iPhone 上合理地呈现大部分网页(iPhone 在发布时的像素数量要少得多)。
除非您的目标是 Android 浏览器(我不建议这样做)，否则视口(viewport)中的目标密度将被忽略，并且根本不会在所有其他浏览器中使用(据我所知)。我们当然不再在 Chrome 中支持它，您不应该包含它或期望它起作用。没有其他人支持视口(viewport)中的目标密度，WebKit 不会也不会继续支持它。
screen.width 报告了一个不同的值，它是 (1/devicePixelRatio) * 真实物理宽度的缩放值，所以 nexus 7 是 800 像素(纵向真实像素) 1.33 的像素密度等于 1/1.33 * 800 = 601 个 css 像素。
每个渲染引擎在处理视口(viewport)的方式上各不相同，但越来越一致。如果 Gecko 没有 pixleRation，那是因为他们还没有实现它。
关于android - galaxy tab/nexus 7 上 chrome/mozilla 中的视口(viewport)、目标密度 dpi、像素比行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15030252/