Viewport Meta Tag for Responsive / Non-Responsive Website Design
by Geethalakshmi[ Edit ] 2013-08-23 15:30:58
Viewport Meta Tag for Responsive / Non-Responsive Website Design
Viewport meta tag is generally used in all responsive website design layouts to set width and height properties of the website to be showcased on Mobile devices.
Syntax:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Other options include:
minimum-scale (default is 0.25)
maximum-scale (default is 5.0)
user-scaleable (can be set to yes or no)
When a non-responsive website is been accessed from mobile devices, the default viewport width is taken. For iPhone it is 980px.
But, it would be efficient if you specify the needed size for your design layout.
Eg:
<meta name="viewport" content="width=1024">
If you do not have enough time to convert your website to a responsive one then adding this meta to your page will be very helpful for visitors who access your website via Mobile devices.
Viewport Properties defined using CSS:
HTML:
@viewport{
width: device-width;
}
For IE10 it is written as,
@-ms-viewport{
width: device-width;
}
Make use of the Viewport meta tag into your <head>, and add the @viewport rule in your CSS to build a flexible website layout.
Refer Viewport Sizes for Mobile and Tablets: http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/
