Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

Why my website is not responsive in mobile?

#1: Your site isn't mobile responsive. Let's state the obvious to begin with. The number one reason why your website might be failing to work on a mobile device is that it is simply not mobile responsive. This means the website doesn't proportionally resize to different size screens.

Why is responsive design not working?

Responsive design stops working when one line of code is missing from the header of an HTML file.


You are probably missing the viewport meta tag in the html head:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Without it the device assumes and sets the viewport to full size.

More info here.


I have also faced this problem. Finally I got a solution. Use this bellow code. Hope: problem will be solve.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">


Though it is answered above and it is right to use

<meta name="viewport" content="width=device-width, initial-scale=1">

but if you are using React and webpack then don't forget to close the element tag

<meta name="viewport" content="width=device-width, initial-scale=1" />