We all know the iPad by now. We also know that it can have it’s own HTML rendering “quirks”, but then again which browser doesn’t?
My latest find was that a clients site wasn’t displaying quite right in iPads. Of course, they didn’t have a responsive design, and didn’t have the budget to pay for one. The page was forced to one side, the elements weren’t the same size as they were on the desktop, and the background images that were set only went part of the way across the page. All in all, not a great result.
It turns out that the fix is extremely simple. The iPad has it’s standard zooming turned on by default, and this can wreak havoc with your layout. To get around this all you need to do is add this META tag into your pages head area:
<meta name="viewport" content="initial-scale=1">There’s a few more tricks that are available for META tags in iPad and iPhone development. Check out the list at Apple’s developer website.