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?

Solution 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

Solution 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.

Solution 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.

Comments

[santosh]

i have added this code in the head section but its not working for my default internet explorer of android you can check - www.freerechargeapp.com/index.html

[bheatcoker]

I really do not understand why for me is not working. In one website do work and in another website does not. And the code structure is the similar with fresh bootstrap

[onebree]

@Skelly - Other answers I've seen left out maximum-scale, and used 1.0 instead of 1. Do you know if these things make a difference?

[SexxLuthor]

Thanks, this fixed the scaling issue on iPhone, and displays portrait and landscape differently (and correctly).