Empty div gets bottom border on iPad/iPhone browser

Not sure if anyone else has been battling with this issue?  Let me explain – I built a set of templates that were tested in the usual suspect (IE6-9, FF3+, Safari 5+ Chrome 10+ Opera 10+) and all worked perfect! (albeit I had to use a dreaded IE6 CSS and conditional statement and the dreaded png fix!).

While I was at it I thought I’d just run a quick test on the Ipad/Iphone just to make sure – I honestly thought it would all be fine as I’d tested thoroughly on Safari for Windows and Chrome.  But to my dismay the “top” div I was using to hold a curved background image in and another I was using to hold a logo had strangely suffered from what looked like a 1px white border on the bottom of each div – obviously ruining my design!

Well I wasn’t going to let the Apple posse get one over on me so I turned to the trusty Google to find an answer – and luckily I did!  A single line of “meta” code in the header was all I needed to beat this Apple monster away 🙂

Here’s the code:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

In a nutshell you need to tell the Ipad/Iphone not to play with the zoom scale at all – and viola it fixes the issue!