＆lt;'meta name =“viewport”content =“width = device-width initial-scale = 1.0，maximum-scale = 1.0，target-densitydpi = ...，user-scalable = 0”/＆gt;'
在不同设备和浏览器上测试。这两款平板电脑都具有1280 * 800px的物理分辨率。星系标签10“nexus 7 7”。
Chrome + device-dpi
galaxy：viewportwidth 1279px，pixel ratio 1，screen.width 1280
nexus7：vp 1279px，pr 1.3312 ...，sw 1280
Chrome + high-dpi
galaxy：vp 1919px，pr 1，sw 1280
nexus7：vp 1441px，pr 1.3312 ...，sw 1280
Chrome + low-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。
现在将width属性更改为任何离散值，如1280
并且移除了比例边界，两个平板电脑都获得了1280的视口。
留空宽度或设置为“自动”Vieport导致
galaxy：vp 980px，pr undefined，sw 1280
nexus7：vp 980px，pr 1，sw 1280
有人可以向我解释一下吗？ mozilla不支持target-densitydpi。 所以它确实没有效果。 而像素比在18之前的mozilla版本中是未定义的吗？ 1）基于android的mozilla在nexus上缩放2/3还是mozilla的“特性”？ 2）980px来自哪里？与将“auto”设置为width相同。但是为什么两台设备都获得了980的viewport.width？有些默认来自W3C？
答案 0 :(得分：2)
980px是Apple选择创建视口的数字，以便大部分网络在iphone上合理渲染（在启动时像素数量少得多）。
除非您定位到Android浏览器（我建议反对），否则视口中的目标密度会被忽略，并且根本不会在所有其他浏览器中使用（据我所知）。我们当然不再在Chrome中支持它，您不应该包含它或期望它可以工作。没有其他人支持视口中的目标密度，WebKit也没有，也不会继续支持它。
screen.width报告不同的值，这是（1 / devicePixelRatio）*实际物理宽度的缩放值，因此nexus 7是800像素（纵向中的真实像素），像素密度为1.33等于1 / 1.33 * 800 = 601 css像素。
每个渲染引擎在处理视口方面都有所不同，但是更加一致。如果Gecko没有pixleRation，那是因为他们没有实现它。
答案 1 :(得分：0)