Mobile Viewport

Below are the 6 things that matter to a designer/developer when it comes to mobile viewport,

###1. viewport device-width

If you don’t use width=device-width, on iPhone your page will stretches over the full available width of the layout viewport, which is 980px on iPhone, if you use width=device-width, your page will fit into screen size of 320px on iPhone.

Question: Shall I use width=device-width? Answer: If your site is a fluid layout desktop design, use it is generally better. If your site is a fixed layout desktop design, it’s up to you, doesn’t matter. If your site is a mobile specific design, just use it.

###2. DPI / pixel desity

You don't need to know about it...... (unless you really want to know it, you can read A pixel is not a pixel is not a pixel, warming: reading it may cause dizziness)

###3. CSS media query max-device-width/min-device-width

iPhone, Andoid has a ususal range of device-width between 320-480, so for instance if you want to have a CSS stlye that only smartphones will pick up, use:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {...}

Question: iPhone 4 has a 640×960 screen, which is beyond 320-480, will they use the above CSS? Answer: iPhone 4 renders EXACTLY THE SAME as the original iPhone, so ignore the fact that it’s a 640×960 screen. It acts as if it’s 320×480.

Question: Android HTC Desire HD has a 480 x 800 screen, which is beyond 320-480, will they use the above CSS? Answer: Android will auto scale up and down based on the DPI, so in short, so again, ignore it, and the above CSS will still work.

###4. CSS media query max-width/min-width

max-width and min-width are updated when you rotate the screen, your max-width in portrait mode become max-height in landscape mode.

@media only screen and (min-width : 321px) { .box { width:200px; height:200px; background:yellow; } }

@media only screen and (max-width : 320px) { .box {width:200px; height:200px; background:red; } }

Question: Is max-width/min-width the same as max-device-width/min-device-width? Answer: If you set width=device-width in step 1, then max-width/min-width is the same as max-device-width/min-device-width in portrait mode, and different when in landscape mode.

###5. CSS media query device-pixel-ratio

device-pixel-ratio could help you know the resolution of the device screen, iPhone 4 and Android Desire HD have pixel ration equal or higher than 1.5, so if you want to target high resolution devices, you can use the media query below:

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { .imagebox {background:(url:"images/high/demo.jpg");} }

Question: When do I need to use it? Answer: When you try to display something in high res when user is surfing from a high end device.

###6. viewport target-densitydpi=device-dpi

The easiest way to explain this is to think about your desktop, on the same monitor if you ajust resolution, your desktop icons look smaller when you use high resolution, and they become bigger when you use low resolution.

When you set target-densitydpi=device-dpi, with the same physical phone size, images/text will look smaller on a high resolution device, and bigger on a low resolution device.

So what’s the problem with that? We are fine with it when we adjust our monitor. The problem is the dpi on a high resolution device can be twice as high as a low resolution device, such big difference can make your pixel related everything shrink into half the size. So based on the design principle of “Priority of constituencies,” this method is hard to implement. Here is Paul’s screenshots: google mobile with target-densityDpi=400dpi (equiv to =deviceDpi on a real 400dpi device): http://paulirish.com/i/afc0.png google mobile without target-densityDpi (also equiv to =160dpi): http://paulirish.com/i/0ee0.png

Question: Is there a iPhone equivalent of target-densitydpi=device-dpi? Answer: Not really, but if you want to have the same effect let’s say on iPhone 4, in your viewport, you can write width=640 instead of width=device-width, but again how can you be sure that it is an iPhone 4?

Question: Shall I use target-densitydpi=device-dpi? Answer: This has been under hot debate, initially, I felt it’s ok to use it, now after a while playing with some previous sites I designed, I realized it may not be easy to implement, so I decide to better not to use it for now.

Note that when you set target-densitydpi=device-dpi, it will affect device-width explained in point 1, 3 and 4. And you have to try to understand point 2.