Thursday, July 9, 2009

Render sites in mobile device with required view

1) By default, all the sites are designed with the width 980 pixels.
2) If we render the page with this width in the mobile, the user sees your page with miniscule, illegible letters and must zoom in to see the interesting parts, this is unacceptable.
3) Luckily, there is an option for us.
Just we need to use a small "meta" tag as shown below.

<meta name="viewport" content="width=device-width,user-scalable=yes" />

width = device-width (automatically adjust according the device width or else you can give your required width)
initial-scale = represents the Zoom level at which the user initially wants to see the page.
user-scalable = if the content exceeds the page, it represents wheather to show the scroll bar or not.

Stylesheet:

If you are providing any style sheet, we need to add the "media" property as shown below.

<link rel="stylesheet" href="StyleSheet.css" media="screen" type="text/css">




3 comments:

Unknown said...

Good one. A new thing to learn for me.

N.V.N said...

Am Impressed Raj .. Good one

digital signature said...

I can't remember the last time I purchased a mobile phone to actually be used as a phone . Maybe it was 5 or 8 years ago? 10 years ago? Anyway, it seems like a long time now.