Saturday, September 5, 2009

iPhone friendly Blogger template change

If you would like to make your Blogger template more iPhone friendly, try adding the following lines of code:

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/>
     <style>
    @media screen and (max-device-width: 480px)
    {
         #sidebar-wrapper{display:none}
         #outer-wrapper{padding:2px}
         .post img{border:none;padding:0}
         #main-wrapper{width:100%;margin:0;min-width:320px;}
         #navbar,#navbar-iframe{width:480px}
         #footer{width:100%}
    }
   
</style>
    <script>
/*<![CDATA[*/
if (!isNaN(orientation))
{
var nb,nbi,onorientationchange=function()
{
nb=nb||document.getElementById('navbar').style;
nbi=nbi||document.getElementById('navbar-iframe').style;
switch(orientation)
{
case 0:
case 180: nb.width='320px';nbi.width='320px';break;
default:nb.width='480px';nbi.width='480px';break;
}
};
addEventListener('load', onorientationchange, false);
}
/*]]>*/
</script>

above

</head>
<body>

 
It accounts for orientation and screen size by removing the sidebar and reducing the size of the navbar to the screen width.
 

No comments:

Post a Comment