twitter Bootstrap site is non responsive on phones and tablets

Hello,

This is more of a question of whether you are using correct meta, styles and javascript lib or not on your pages.

Generally nowadays you will use CSS frameworks like Bootstrap and rely on them for responsiveness of your pages.

Lets see what’s bare minimum requirement for your pages to work and look good if you are solely building your pages with twitter bootstrap

The CSS

You should be including the responsive CSS stylesheet provided with bootstrap

and then you should include jQuery and bootstrap.js files on your page before the body end tag as shown below

Don’t forget to add viewport meta tag in your head element as shown below

So the bare minimum HTML template for twitter bootstrap is shown below

In addition to above you can also put a mobile friendly icons links as shown below

so the final template will be

The above should also be included inside the head element.

Now when you try to view your site on your iPhone or Android phone you will see your site behaving properly layout wise. Always try to use bootstrap grid system for column based layouts.

Resources

http://twitter.github.com/bootstrap/index.html

If this post needs any correction please let me know by leaving your comments.

I hope this helps

Cheers.