Mobile Safari 4.0 + Horizontal Scrolling = SUX
Posted by: sarah on: December 1, 2009
Recently, I ran into an issue with how some of the sites I’m responsible for were displaying on Android 2.0 devices. Thanks to Google for providing a decent Android SDK - I was able to test my sites on Android 1.6 and Android 2.0. Android 1.6 displayed the sites fine, wrapping like it should. The exact sites in Android 2.0 had all this unnecessary whitespace on the right-hand side and allowed for a lot of unnecessary panning. At first it was reported as an Android 2.0 issue, but after seeing a friend’s iPhone that showed similar issues, I was able to narrow down the problem specifically to Mobile Safari 4.0.
Now maybe you guys like your whitespace. But I personally am not a fan of unnecessary scrolling on websites, and I don’t want my end users to have to deal with it either. After spending an afternoon with my favorite search engines, I finally found out how to get rid of the annoyance of horizontal scrolling.
The solution? All I needed to do was add the Apple-specific meta tag within my <head></head> tags:
<meta name = “viewport” content = “width = device-width”>
For this and more Apple-specific hacks, check out the Safari HTML Reference page on Meta Tags.
I spent way too much time trying to track this down, with so many people talking about their new Droid’s user agent string and only a couple references to the problem. So I hope this blog post hits the search engines and helps others out with Mobile Safari 4.0 and horizontal scrolling or panning.
Leave a Reply
Search
My Book
Buy it now!