Why Bootstrap is not responsive in IPhone?

| | 1 min read

Bootstrap twitter is includes a responsive, mobile or tablet first fluid grid system that ... it is styling on small and medium devices but also on large devices if a .col-lg-* class is not present. My company has a lot of free Drupal themes developed. But there is a problem i.e these are not responsive. So we started to change this themes in responsive and For that we suggest the new bootstrap framework for responsive. We success fully converted the plane html code in to bootstrap grid format.

So I am testing out Bootstrap 3 responsiveness navbar and we have a demo website. When I resize or decreases the size of the browser on a desktop, it all works correctly including collapsible menu with a small icon on the top with the nav bar which I can click to see more menu buttons.

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

This issue is because of We didn't add the meta tag in html header part. So we add the below tag in header part:

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