How to get your website looking good on iPhone

Posted by Henrik Madsen on July 23, 2008

Anyone who’s surfed around on an Apple iPhone - or in my case an iPod Touch - will know that Apple’s Safari engine renders most sites surprisingly well. Chances are your website was designed purely for desktop browsers, with no consideration for mobile devices, and it might look reasonably good on the iPhone.

But take a closer look (as I did today with our website) and you’ll notice that the size of text is adjusted - enlarged in fact - when viewed on an iPhone. This is because Safari automatically determines the width of a block and then scales text to make it more legible.

I support the rationale but it can play havoc with your layout - causing some content to become hidden or overlap; pushing elements out of place - especially when you consider how easy it is to browse, zoom in and out and move around. Double-tap a text block and it zooms to fill the screen. Double-tap again and it zooms back out…

Assuming your website follows good design practices the fix for this annoyance is ‘copy & paste’ simple. Just make sure this property appears in your external css file:

html {-webkit-text-size-adjust:none}

This turns automatic text adjustment off and hey presto, your website should look exactly the same on iPhone as it does on your monitor.

If not, you can always ask us to have a look! Or check out Apple’s Safari Web Content Guide for iPhone.

 

Filed Under Hints & Tips, Website Design

 

Comments

Leave a Comment

If you would like to make a comment, please fill out the form below.

Name (required)

Email (required)

Website

Comments

Spam Protection by WP-SpamFree

2 Comments so far
  1. QiSoftware July 28, 2008 5:05 pm

    Do you know if there is an online tool that accurately shows what a url will look like in the iphone browser?

  2. Henrik Madsen July 28, 2008 5:33 pm

    I don’t think one exists yet but do let me know if you discover it first! Meanwhile, if you have a Mac running OS X 10.4.7 or later, there’s a handy preview tool - open-source - called iPhoney here http://www.marketcircle.com/iphoney/

Recently Posted


Categories


Archives


Generator iOnline

We’ve always got our eye on something so come back soon for even more news, hints, tips, discoveries, gossip and more.