Mobile display shows only half the screen

This problem arises when you look at the full website on a mobile phone.  You did hell of hardwork to complete responsive design for the website, at the end you find that its displaying half of the screen.  Make sure <meta> tag mentioning device width is there for responsive.  I read in few blogs removing the following line will solve the issue:

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

But removing that line will stop the responsiveness of your website.  This line is important, to solve the issue of half display you have to add another line your CSS file, that is:

@-ms-viewport{
  width: device-width;
}

Add these lines and you are done.


Thanks, I hope it works for you, if not please comment.

Share Your Solutions