∅ the empty set

Safari for iPhone ignores viewport settings on .mobi domains

iPhone Simulator

While working on the redesign of a client's website, I ran into a weird issue with Safari for iPhone: whatever device-width I specified in the viewport meta tag, the web site would render at 100%.

The viewport

For Safari on iPhone OS, the viewport is the area that determines how content is laid out and where text wraps on the webpage. The viewport can be larger or smaller than the visible area.

Safari on iPhone OS sets the size and scale of the viewport to reasonable defaults that work well for most webpages. The default width is 980 pixels.

For example, to set the viewport width to the width of the device, add this to your HTML file:

<meta name="viewport" content="width=device-width" />

If the webpage is narrower than the default width, set the viewport width to the width of your webpage accordingly:

<meta name="viewport" content="width=800" />

According to Apple's documentation “[..] the goal of Safari on iPhone OS is to fit the webpage in the visible area when completely zoomed out by maintaining a ratio equivalent to the ratio of the visible area in either orientation”. So most, if not all, web sites are rendered correctly in Safari on the iPhone.

Except the one I was redesigning :/

After spending a lot of time debugging my markup and CSS, I gave up, and postponed this issue to later, concentrating of the website redesign itself. Launch time approaching, this issue stuck out more and more on my todo list, until half an hour ago.

dotMobi

Well it turns out it has all to do with the domain's name TLD: .mobi (dotMobi). I chose this domain to develop the website on while the current one was running on its .com TLD. The switch would be easy enough come launch time.

I have never taken much time to look into dotMobi since it launch in 2006, but according to its Wikipedia entry “dotMobi does not itself mandate any particular technology, but does require that .mobi sites produce user experiences consistent with their guidelines and specifically optimized for mobile phones”. I would never have imagined that a browser would treat a website differently based solely on its TLD.

The only other available browser on the iPhone (Opera Mini) renders it as a normal web site. It's only when I thought to load the web site using its IP number instead of its domain name that I understood what was going on.

I suppose this makes sense from a default behaviour point of vue: the site is supposed to be optimised for mobile viewing, but I don't understand why the viewport settings aren't taken into account if they are present.

Feeling relieved, I needed to share this info with you.

Ø permalink: https://davidroessli.com/logs/2010/04/safari_ignores_viewport_mobi_domains/


Reponses to “Safari for iPhone ignores viewport settings on .mobi domains”

#1 by Andy

19:20 on 29 April 2010

Wow, that's really weird, but incredibly handy to know - especially like you say - not being an obvious thing to debug or understand. I wonder what made them implement it like that?

#2 by Ronan Cremin

10:47 on 5 May 2010

David,

I have to admit that on first reading this I thought there was no way that it could be true.

So we tried testing it here at dotMobi and can confirm that your experience is repeatable—we tried the same page with a .mobi address, a .com address and a local intranet address (no top level domain suffix) on a 3GS.

That said, the effect doesn't appear to have anything to do with the viewport tag—we experienced the same effect without it. It's difficult to guess what Apple is at here, and why they choose to render the page slightly differently based on the TLD. On the plus side it does suggest that they are trying to optimize the rendering of the page if they believe it's mobile-friendly, which sounds like a good thing.

Interesting sleuthing, thanks for sharing.

Ronan Cremin, dotMobi

#3 by David Roessli

10:57 on 5 May 2010

@Ronan Cremin: thanks for confirming this.

The reason why I mentionned the viewport meta tag, is that whatever the settings were (size, scaling, etc.) Safari for iPhone had its own rendering interpretation when the page was requested from the .mobi TLD. The rendering was different when requested from the .com TLD (or the IP address) - namely, the viewport settings were honored.

Thanks again for your comments.

#4 by Chris Blown

04:01 on 18 November 2010

I'm glad I found this post, I thought I was going mad!

While I understand the reasoning behind why Apple might do this, changing behaviour purely based on the domain is madness.

You should at least be able to override it. I'd suggest the presence of a meta viewport should tell Safari "hey, I know what I am doing, let me be". If the meta viewport is missing sure then lock it down to 100% or whatever its _actually_ doing.

#5 by David Roessli

09:10 on 18 November 2010

@Chris Blown: you are right. Thanks for your comment.

As of today, I still haven't found any documentation explaining this behaviour.

#6 by mrfusion

17:24 on 22 March 2011

Interesting. Had to discover it the hard way today.

#7 by David Roessli

23:54 on 22 March 2011

@mrfusion: sorry to hear that. Thanks for your comment.

#8 by Maximilian Brinckmann

18:48 on 9 June 2011

Hi David,

thanks for your article - I discovered that issue today, too.
I'll let my domain redirect to this article until it's closed…

Cheers
Max

http://www.79point9.mobi/

#9 by Mike Causer

05:15 on 1 June 2012

This is madness!

#10 by UK Web Apps

10:04 on 25 July 2012

Incredible but true.

We spent a lot of time on one project trying to figure out why a copy of SlideDeck wouldn't render properly. Just moving it to a non-MOBI domain resolved everything.

These days as web developers - it's taking longer for us to test and perfect our projects.

#11 by Philipp Metzler

11:57 on 25 September 2012

Hi,

Google Chrome on iOS (iPhone) shows the same behaviour. As Mobile Safari and Google Chrome both use Webkit as their rendering engine the problem seemes to be caused by Webkit.

Still can't believe it ...

Cheers,

Philipp

#12 by Philipp Metzler

18:10 on 25 September 2012

#13 by David Roessli

21:11 on 25 September 2012

Thanks @Philipp :)

#14 by Jody

13:31 on 27 September 2012

@Philipp Metzler Are you sure that it is really in the base WebKit?

I understand that Chrome on iOS is really just Safari since Apple doesn't allow other browser engines on iOS. So the issue could just be Safari alone.

#15 by Binyamin

09:52 on 30 September 2012

#16 by David Roessli

10:30 on 6 October 2012

Thanks @Binyamin :)

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)



Previous: ø HTML5 presentation (in HTML5)

Next: Lift 10 — Wed afternoon sessions


About

Hello, my name is David Roessli. I am a freelance web designer and developer based in Geneva, Switzerland.

This weblog is an nth attempt to solve my multiple online personalities and weblog/rss feeds burnout issues. (more)

Words

I have been contemplating the idea of upgrading my desktop Mac since this spring. The latest 27" iMac (Quad-Core) seemed the perfect candidate, but the release of Apple's 27" Monitor last September made me stick with the Mac Pro...

Music

The autopsy of an iconic album cover picked up on Kottke.org. A stacked graph of successive radio signals from pulsar CP 1919, in a 1977 astronomy encyclopedia that originated in a 1970 Ph.D. thesis. Fascinating <3...

Pictures

Check out my latest Flickr ramblings. Mostly day to day cameraphone pictures stolen here and there.


© 2000-2016 David Roessli | v4.1 | as valid xhtml and css as possible | hosted by pair Networks | RSS feeds.