Responsive website zoomed out to full width on mobile

twitter-bootstrap user-interface twitter-bootstrap-3 responsive-design bootstrap-4
lawphotog picture lawphotog · Oct 3, 2013 · Viewed 69.7k times · Source

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

Zim picture Zim · Oct 3, 2013

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

Related questions

Left align and right align within div in Bootstrap

What are some of the common ways to left align some text and right align some other text within a div container in bootstrap? e.g. Total cost $42 Above total cost should be left aligned text and $42 is right aligned …

Read More
Semantic-ui vs Bootstrap

Which is the best one to use and if possible, please provide the difference(s) and advantages of these two. Semantic-ui vs Bootstrap I am trying to build my UI and really confused as what to use. Please suggest me …

Read More
How to set custom height & width for select enhanced with selectize.js jquery plugin?

I'm using https://github.com/brianreavis/selectize.js in a project and I'm not able to customize the height and width of the select input: modifing the select via css not works there is not height / width options in https://…

Read More