I’m just going to write some tricks I’m finding on the web to design html templates for desktop, tablets and smartphone… this is not an “howto” guide; just some quick notes I need to remind.
This is not a “one time post”… it’s going to be updated in the next days. Any contribution is defenetly welcome!
CSS
Define the media screen size to override classes when the page is shown on ipad, iphone, android or desktop
-
ipad landscape: @media screen and (max-width: 1024px)
-
ipad portrait: @media screen and (max-width: 880px)
-
smartphone: @media screen and (max-width : 620px)
HTML
Interesting notes on apple site
Meta Keywords to set the viewport for smartphone
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> <meta name="format-detection" content="telephone=no" />
Tell IE to use chrome to render
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
JS
<script src="js/libs/modernizr-1.7.min.js"></script>
For Png problem in IE
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->
