Responsive Viewport Meta
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>meta name sends browser the instruction about viewport configuration
width=device-widthdefined the width of the viewport to be used
initial-scale=1.0Initial 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
- 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.
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