- Tutorials / Mobile Web Development
- Tuesday, 30th Aug, 2011
Nowadays, the new generations of mobile browsers can render full web pages (desktop version) without any problems and scale them to fit nicely inside the mobile browser’s visible viewport. The user then can zoom in on areas of interest and pan around on the page using touch, or keypad that depending on the mobile devices. This may not sounds user-friendly for mobile users, because if the web page loaded is wider than 320px (see Figure 1), everything in the page were too small to read without zooming.
Now, we have a solution to solve it by telling the mobile browsers to render the page according to the mobile devices using “viewport meta tag“.
In order to define mobile’s viewport, you have to include a viewport meta tag in the <head> section of your HTML document as shown below:
<meta name="viewport" content="width=320">
Example above shows you the basic syntax of defining a viewport. This setting will make the browser render the page on a device’s screen with a width of 320px, and then fit it nicely in the screen area (see Figure 2). If the screen size is over 320px wide, then the page will be scaled up (see Figure 2-1).
Figure 2, Figure 2-1
Specifying the screen size in viewport meta tag may not a great enough, so we recommended you to set the viewport width to be equal to the width of the device’s screen:
<meta name="viewport" content="width=device-width">
This setting will force mobile browser to render the page as wide as screen size without any scaling.
Besides, the width parameter that we mentioned above, there are few more parameters available in viewport meta tag such as:
Similar to the width property, there is also a corresponding one for height settings. You can use it with specific pixel values, or with device-height.
<meta name="viewport" content="width=device-width, height=device-height">
The initial zoom factor for the viewing area. You can set the initial zoom in by default.
<meta name="viewport" content="width=device-width, initial-scale=2">
By using the “maximum-scale” and “minimum-scale” settings, you can constrain how much user can zoom in / out your web page.
<meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=0.5">
In addition, you can also disable the zooming function by defining “user-scalable”.
<meta name="viewport" content="width=device-width, user-scalable=no">
Most of the recent generation of mobile devices (mostly Android devices) comes with various densities of dpi(dot per inch), such as high-dpi, this makes it almost impossible to distinguish individual pixels and renders objects shown on the screen with very high fidelity. This problem was cause your page appear larger on the lower density screen and smaller on the higher density screen. In order to solve the problem, you need the help of “target-densitydpi” setting in your viewport meta tag.
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
The “target-densitydpi” allows you to specify the target density for which the web page is designed, using the following values:
Viewport meta tag is important in developing a mobile-optimized website, play around with these settings, and let us know what combination works best for you!