Viewport, target-densitydpi, pixelratio behaviour in chrome/mozilla on galaxy tab/nexus 7

0
votes

<'meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, target-densitydpi=..., user-scalable=0" />'
tested on different devices and browsers. Both tablets have 1280*800px physical resolution. The galaxy tab 10" the 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


Now with Firefox (15/19) +
galaxy : vp 1280px, pr undefined, sw 1280
nexus7 : vp 853px, pr 1, sw 1280

The 853px are 1280 * 2/3.

Now changing the width attribute to any discrete value like 1280 and removing the scale boundaries both tablets get their viewports of 1280. Leaving width blank or set to "auto" the Vieport results in
galaxy : vp 980px, pr undefined, sw 1280
nexus7 : vp 980px, pr 1, sw 1280

Can anybody explain that to me? target-densitydpi is not supported by mozilla. So it does have no effect. And pixelratio is undefined in mozilla versions before 18 i think? 1) Is the mozilla scaling by 2/3 on the nexus based on android or is it a "feature" of mozilla? 2) Where do the 980px come from? Its the same as setting "auto" to width. But how come that both devices get a viewport.width of 980? Some default from W3C?

2
androidcssgoogle-chromedpi

2 Answers

2
votes

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.