Template updated
Updated (more like deconstructed, tore apart and rebuilt from the ground up) my blogging template to work nicely with the iPhone. Still not perfect, but better. I’m sure I’ll continue to tweak it over time.
What are those changes, you ask?
In the <head> section, add:
<meta name=“viewport” content=“width = device-width” />
The viewport tag will ensure that the page is taking the full width of the iPhone, without any horizontal scrolling.
Next, add this to the <body> tag:
<body onload="setTimeout(function() { window.scrollTo(0, 1); }, 100);">
This will make sure that once the page is loaded the top toolbar will get scrolled out of view so that as much as your web page as possible is displayed on the screen.
Finally, you’ll want a custom stylesheet for the iPhone. My stylesheet is built-in into my template (i.e. not an external file), so I added another <style> tag that overrides and modify the style defined in my “default” stylesheet:
<style media="only screen and (max-device-width: 480px)" type="text/css">
/* Override style definitions as appropriate */
body {
width:480px;
background:#f00
margin:0;
padding:0;
font: large "Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;;
color:#333;
}
/* etc… */
.not-iPhone {display:none;}
</style>
Note that I define a #not-iPhone class so that I can hide any content that I don’t want to show up on the iPhone, such as large images or unsupported media formats.
In the iPhone stylesheet, I’ve changed the layout so that it fits a smaller screen (480 px). For example, I moved the sidebar at the bottom of the page, instead of on the left. I also simplified the layout and removed some of the background textures I used on the desktop. Finally, I used a resized version of the header image (resized to 480 px wide), so that it loads a bit faster.
RSS Feed