Revisit reasons for using target-densitydpi=160dpi

[andreasbovens]

The idiot's guide to viewport and pixel ( https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 ) mentions the following:

[Slide 5] "You will need to specify target-densitydpi=160dpi to make sure the consistency of device-width on Android, so with this applied, the device-width will always be 320px:"

Afaict, this is not always correct: when used in landscape mode at 160dpi for instance, the Android browser and Opera Mobile 11 don't report a device-width of 320px, but rather of 426.6667px.

Using a 160dpi setting seems to make the Android browser, Opera Mobile 11 indeed behave a bit more as an iPhone browser at first sight, but I'm not sure if it is something to rely on. It already behaves differently in landscape mode (due to its 3/4 aspect ratio instead of the iPhone's 3/2), and I wouldn't be surprised if this difference would be even more explicit on devices with non-standard form factors and high screen resolutions. Indeed, what will happen when we force 160dpi on retina screens (you can't test it on the iPhone as it doesn't support target-densitydpi)? My guess is that this will result in text that is way too small.

Hence, the part on [Slide 6] "If left unspecified, it will not cause as much problem as the above, but you can't control the default dpi used, and that will cost inconsistency when used with CSS media query or JavaScript to detect screen width." does not make so much sense... Even if specifying it, you will encounter "inconsistencies" in the screen width (see previous paragraph). The good news is that we have media queries to catch those inconsistencies, so I don't see this as a "bug" we have to work around.

So, all that to say that at present and unless I've misunderstood something, my advice would be to stick with width=device-width (leave it up to the browser to handle DPI stuff), and tweak images where needed with device-pixel-ratio specific overrides. Only in very specific cases you'll want to specify a target-densitydpi value.

[chuanxshi]

this whole issue is worth debating, and i expected people to bring this up, thanks for sharing your view. :)

for your first point, iphone 3 has 163dpi , iphone 4 has 326dpi, in order to make sure cross-browser consistency, both rendered as 163dpi by default. same as Windows phone. So when you say 'what will happen when we force 160dpi on retina screens', the answer is nothing will happen, because it's already 163dpi by default, and it doesn't cause any problem. so when we do target-densitydpi=160dpi Android, it helps to align with ios3/4 and windows mobile.

for your second point, we can use CSS media query, exactly for this reason, we need a base line, and 160dpi is the baseline.

a few additional points: the biggest reason we need a baseline is because the difference in dpi on mobile is HUGE, and a screen is really SMALL. these two factors are the reason for a ''''baseline''''''. :)

[chuanxshi]

i may still need better way to explain this idea.

[andreasbovens]

I think the iPhone 4 works fine because it cheats a bit and multiplies all values with a factor of 2 (thereby bypassing the need for supporting target-densitydpi). So, what I meant is actually 'what will happen when we force 160dpi on Android devices with retina screens running browsers with target-densitydpi support' ;-)

[chuanxshi]

@andreasbovens:

1. Android version 2.2 and below by default uses 160dpi, so on my HTC desire HD (480x800), it used to read 320x533
2. A recent update to Android 2.2.1 causes this changed to a medium dpi
   The problem is with this medium dpi, it's hard to find a relative reference baseline
   Now on my HTC, it reads 369x615 (of course I agree when you when rotate the screen, this will be vice versa)
3. if i set target-densitydpi=160dpi on Android 2.2.1, it read 320x533 again
4. all other devices: iphone3/4, windows mobile 7 and other devices, all uses 320 as a baseline.

you can read Bryan's idea at his post below, he mentioned about Android using 160 as baseline for everything else to relate to 320. i believe at the time of his writing, it was still android 2.2:
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
(search for the keyword: 160 ppi screen density)

[andreasbovens]

It appears target-densitydpi=160dpi is now gone from the boilerplate template as per https://github.com/shichuan/mobile-html5-boilerplate/commit/7d5355f59975134c3a36db41f049588f4dc549de#index.html (neat!), but demo/index.html still uses width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no. This should probably be corrected.

[chuanxshi]

@andreasbovens: i reopened this issue. yea, just to clarify the reason we removed it is at here: http://html5boilerplate.com/mobile/#thankunote

To use 160dpi doesn't have a big impact to the viewport (not as much as device-dpi), but we decide to leave that for the user to decide. Mainly because if a design is fluid, there is no need to make the portrait width 320 cross-browser.

We also fixed a lot other issues also stated in on the site, thanks for highlighting the issue in demo, i am gonna change that now :)

[Takazudo]

Hello, 1 vote to remove 'target-densitydpi' from viewport meta.

I found the browser setting to change the densitydpi manually.
Launch the browser and push 'menu' then...

More->Settings->DefaultZoom

You can select Far / Medium / Close there.
This seems to specify densitydpi to high / medium / low.
When I put 'target-densitydpi=medium-dpi' to viewport meta, this browser setting was ignored, it was forced to be medium even if I changed the defaultZoom to "Far".
So I think target-densitydpi should not be in viewport meta when you make fluid layout.

[chuanxshi]

@Takazudo it's already been removed in 1.1 release :)