Responsive web design is working on desktop but not on mobile device

Website not working on mobile

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">

<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

Meta Viewport Attributes
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