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

I have a website which must be responsive for mobile phones. I've created it using my desktop. When I adjust browser windows it's working perfectly for mobile phone but when I check it on my real mobile phone: Samsung Galaxy S2 it's not responsive to the mobile view.

What could be the wrong?

Answers


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


Check your CSS or use CSS Validator.

    Parse Error

   .navbar .nav li a {
    padding-right: 5px;
    paddng-left: 5px;

It looks like you haven't closed your curly bracket or typo error.


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

Need Your Help

How to change the name of a gist in github?

github gist

Is there a way to change the name of a gist (github) ?, apparently it is ordering the files of the gist in alphabetical order, an naming the gist according to the file that appears first.