Translate

Saturday, August 31, 2013

How to use viewport meta tag to zoom on mobile browsers


What you should know?

     In past, most websites developer/designer used to create web pages for bigger screen  or monitor.
These large monitors varied in sizes such as: 800 pixel  wide and 600 pixel height. 
Well, with time 800X600 pixel resolution was left behind because largest screen starting appeared on the market. 1020x 768 pixel  resolution screen became more common and people enjoyed it.
However, this larger resolution screen was not effective and it was hard  for people to read web pages that was design for bigger screen ( 22 in or 28 in) on a small screen. Consequeces:
The text was too small and unreadable.

      Today,  mobile devices such tablets,  mobile phones, are more in use than ever and they have smaller screen resolution.
Most mobile phones such as, Iphone, Android, Blackeberry, Nokia etc.. have each different sizes width and height which makes a little bit complicated for developers to target every phones while developing a site.

Solution:

Using  mobile meta viewport tag makes everything simpler and easier. Developer do not need to worry too much in writing code for every mobiles phones. 
They simply use a meta tag to target all devices in one
<html>
<head>
<title> I love meta tag </title>
<meta name="viewport" content="width=device-width/> 
</head>
<body>

</body>
</html>

NOTE: 
1-Users/clients can easily access different location in websites without squeezing every page.
2-This meta tag is used now in many mobile browsers across the globe.
3-This meta tag is not an standard tag for the web.

Others: You may also try this in case the above meta tag is not working.
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
minimum-scale=1.0, maximum-scale=1.0" />
Thank You! Hope this was helpful for you.

No comments:

Post a Comment