Tuesday, 18 December 2012

"viewport" meta tag to control layout on mobile devices

"viewport" meta tag to control layout on mobile devices

<meta name="viewport" content="width=device-width">

General Use of Viewport Tag
Viewport meta tag is generally used for responsive web design to set the viewport width and initial-scale on mobile devices.

The viewport is the logical window in which a web page is designed. We can set the width, height, and initial scale of the viewport for a web page using the viewport property in an HTML <meta> tag.

 We can add viewport meta tag in Head tag like this:

 
<!doctype html>
<html>
<head>
  <title>Hello world!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
  <p>Responsive Web Design!</p>
</body>
</html>
Know about Viewport Metatag basics: 
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport meta tag supports a handful of other properties for the "content" attribute:
viewport meta tag "content" property attributes
PropertyDescription
widthThe width of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "device-width" to set the viewport to the physical width of the device's screen.
heightThe height of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword "device-height" to set the viewport to the physical height of the device's screen.
initial-scaleThe initial zoom of the webpage, where a value of 1.0 means no zoom.
minimum-scaleThe minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn't able to at all.
maximum-scaleThe maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn't able to at all.
user-scalableSets whether the user can zoom in and out of a webpage. Set to yes or no.
When optimizing a webpage for mobile devices, the first step is to add the viewport meta tag to the HEAD section of your page, so that mobile devices refrain from making changes to the zoom level of the webpage unilaterally. In most cases you'll simply want to set the meta tag's content property to "width=device-width", so that no scaling of the page occurs at all, and your CSS media queries will return the actual dimensions of the device, not the "zoomed out" version's. To also prevent the device from zooming in on a webpage when its orientation has been changed from portrait to landscape and visa versa, you can also throw in an initial-scale and maximum-scale property and limit both of them to 1:


Webpage rendering at 100% and Scaling Not working for Your web page in Mobile Device ?? 

Here is a solution : 
Generally we make a Common Mistake in Adding Viewport tag:
A common mistake is that people often apply initial-scale=1 on non-responsive design. It will make the page render at 100% without scaling. If design is not responsive, users would have to pan around or zoom out to see the full page. The worst case is combining user-scalable=no or maximum-scale=1 with initial-scale=1. It will disable the scaling and zooming capability of site. With scaling disabled, users have no way to zoom out to see the complete page. 

Note: if design is not responsive, do not reset the initial-scale or disable scaling!


Keywords:
viewport meta tag to control layout on mobile devices
viewport meta tag Tutorial
viewport meta tag- the key to preparing a page for mobile devices optimization
Webpage rendering at 100% and Scaling Not working for Your web page in Mobile Device ?? 
How to fix Webpage Scaling issue in Mobile  device?
Zooming capability of webpage disabled??

 Reference urls:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries3.shtml 

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)