The most important of the new meta tags is the viewport meta tag. This meta tag was initially introduced by Mobile
Safari and is used as a way to allow developers to define the width and the scaling of the viewport. When used
incorrectly, the viewport meta tag can cause a terrible experience for users.
The viewport meta tag content consists of a comma-separated list of key value pairs, the values that can be used are:
1. width:– The width of the viewport.
2. initial-scale: The scale of the site when it initially loads.
3. user-scalable: By default, the user can zoom the site, setting “user-scalable” to “no” disables this. This is bad for the accessability of the site so it is discouraged.
4. maximum-scale: Allows you to define a maximum level that the user can zoom the site.Although not as bad as user-scalable, this can still be harmful to accessability.If you were to add this meta tag to a nonresponsive site, you would set the viewport meta tag to have a sensible width to display the site comfortably. If you take an example of a 980px site, which is centrally aligned, you would want to include a bit of spacing around the edges, so you might set the viewport width to 1024px, as shown in this example:
<meta name="viewport" content="width=1024, initial-scale=1">
For responsive design, you want the width of the viewport to be equal to the width of the device you are using.This is for two key reasons: first, you will be building your CSS to target the width of the viewport so you want the viewport width to match the device width. Second, it tells the device that the site is mobile optimized and that it therefore does not need to load the page with a large default viewport zoomed out. To make the viewport equal to the width of the device you are using, you set the value for the viewport width to device-width instead of specifying a specific size. You also want your site to start with a default zoom level, so you have initial-scale set to 1, as shown in the following example:
<meta name="viewport" content="width=device-width, initial-scale=1">
Comments
Post a Comment