Responsive Viewport Meta

by · Published · Updated

Responsive web design is built by writing CSS for all devices that are in use with respect to their respective width. When we talk about responsive than first of all we need to instruct the browser about our web responsive layout. This is done through adding Meta tag information in the beginning of the HTML. This helps the browser to use the information corrective for better user experience while in small screen devices i.e. Smartphones, Tablets etc.

Viewport is defined as the area that user’s experience while visiting website on public domain. In the beginning internet was for large screens only than soon it started on mobile phones which led to better and smarter browser which scaled down the content to mobile browsers with lot of adjustments. As the time progressed there was talk of responsive web design and with HTML5 Viewport was introduced in the <Meta> tag which controls the site behaviours according to the device width and initial scale respectively.

Responsive Viewport Meta Tag

This meta tag provides the information that this web page(browser) will follow standard responsive design with initial scale and width information to be used while viewing websites on internet accessing devices. Below we have provided one standard viewport meta tag which you will find in most of the websites.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Above meta statement starts with meta name i.e. viewport and content attribute in which width(=device-width) and initial scale (being 1.0) determines the scaling of the web layout to the users view. Once you add this information to your web layout than every time your website is resized according to the device in which it is opened.
<meta> meta name sends browser the instruction about viewport configuration
width=device-width defined the width of the viewport to be used
initial-scale=1.0 Initial zoom scale to be used while viewing the site

[table caption=”Meta Viewport Attributes” width=”900″ colwidth=”150|250|500″ colalign=”left|left|Center”]
Name, Viewport Descriptors, Description
width, device-width, defines width to the browser
,min-width, Min-width defined for specific site ratio
,max-width, Max-width defined for specific site ratio
height, device-height, Defines the height of the element
,min-height, Defines the minimum-height of the element
,max-height, Defines the max-height of the element
user-scalable, Yes or No, allowing the user to zoom-in & out
initial-scale,1.0(Default), defines the scale of the website
,minimum-scale, defines the maximum zoom level on website
,maximum-scale,defines the minimum zoom level on website
[/table]

  • user-scalable=yes by default allows user to zoom in and zoom out in multiple browsers
  • user-scalable=no means user will not be able to zoom the site in any ratio.
Tip : All modern devices have different width and complex issues might be there even you follow all rules as there are some revisions going on continuously. You can check see the complete reference here W3C recommendation

Even though the rules are defined still there are some exception that creates confusion when practically we do these things. Now we will discuss some condition where you have to mix these above viewport rules.

Meta viewport scale to fit
Meta Viewport Email (Responsive Email)
Meta Viewport Tag Non-Responsive

Also Check out

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *