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
1 2 |
<link href="/css/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="/css/lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css"> |
and then you should include jQuery and bootstrap.js files on your page before the body end tag as shown below
1 2 |
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> |
Don’t forget to add viewport meta tag in your head element as shown below
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
So the bare minimum HTML template for twitter bootstrap is shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Bootstrap HTML Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.responsive.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>This awesome site is built with bootstrap</h1> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
In addition to above you can also put a mobile friendly icons links as shown below
1 2 3 4 |
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57-precomposed.png"> |
so the final template will be
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Bootstrap HTML Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap.responsive.min.css" rel="stylesheet" media="screen"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57-precomposed.png"> |
1 2 3 4 5 6 7 |
</head> <body> <h1>This awesome site is built with bootstrap</h1> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
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.
Leave a Reply