0

<'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 + device-dpi
galaxy：viewportwidth 1279px，像素比 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 , 公关未定义, sw 1280
nexus7 : vp 853px, pr 1, sw 1280

853px 是 1280 * 2/3。

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

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

4

2 回答 2

2

980px was a figure that was chosen by Apple to create the viewport at so that it most of the web rendered reasonably on the iphone (which had a much smaller number of pixels at launch).

Unless you are targeting the Android Browser (which I would advise against), then target-density in the viewport is ignored and not used at all in all other browsers (from what I can tell). We certainly no longer support it in Chrome and you shouldn't include it or expect it to work. No one else support target-density in the viewport either and WebKit does not and will not continue to support it.

The screen.width reports a different value, which is a scaled value to the (1 / devicePixelRatio) * real physical width, so the nexus 7 is 800 pixels (real pixels in portrait) with a pixel density of 1.33 which equates 1/1.33 * 800 = 601 css pixels.

Each rendering engine is different in how it deals with viewports, but is getting more consistent. If Gecko doesn't have pixleRation then it is because they haven't implemented it.

于 2013-03-05T14:53:34.360 回答
0

视口目标密度dpi 支持已被弃用

于 2013-02-22T19:39:56.103 回答