Responsive website zoomed out to full width on mobile

Question

I am testing out Bootstrap responsiveness navbar and I have a demo website. When I resize the browser on a desktop, it all works fine including the nav bar which become collapsible menu with a small icon on the top which I can click to see more menu buttons.

But when I tried it from a mobile browser (I tried it on chrome and internet browser on an Android), I didn't see the responsive design. I could only see very small version of desktop like website.

Could anyone point out what I am doing wrong?

Answer 1

Add this to your HTML head..

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

This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Answer 2

as suggested here http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

would be an even better choice as it makes going from portrait to landscape and back a much more pleasant user experience as with/height would adopt naturally because of the possible auto-scaling.

Answer 3

Adding this for people searching this error for whom the accepted answer is not working. I believe this will be a rarer, but nonetheless frustrating case:

If your page is rendering inside a frameset (for example domain cloaking), then putting the meta tags won't help. You would need to put them in the page on the cloaking domain, which you may or may not have access to depending on your DNS host.

Answer 4

Try clearing your browser's cache and open the page in a fresh tab. This sometimes resolves the issue for me whenever it happens.