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.
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 configurationwidth=device-width defined the width of the viewport to be usedinitial-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]
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.
Also Check out
When it comes to children, there’s one universal truth: the right toy can spark imagination, build skills, and make memories…
In today’s digital age, where screens and gadgets dominate our children’s lives, there’s something heartwarming about a well-loved plush toy…
In a world dominated by screens and fast-paced routines, it’s easy to forget the simple magic of a toy in…
In the heart of Delhi’s vibrant streets lies a world where imagination meets innovation — the magical universe of toys.…
When was the last time a toy truly amazed you—not just as a product, but as a thoughtful tool for…
In the digital age, the way we experience childhood has changed, but the essence remains the same—imagination, exploration, and joy.…