.mobi Domain and iPhone Web Page Rendering (Safari)

I discovered, from a very old post on a blog, that a web site under the .mobi TLD is threated in a “different” way by Safari on iPhone. For who are used to play with mobile sites and the viewport metatag, this one is partially respected by iPhone while the site is under a .mobi domain. In particular, Safari ignores the “width” keyword, forcing it to “device-width”.

For sites which have a fixed width (for example designer on a 760 pixel wide canvas because inherited from their Facebook version) this is a big problem. Usually, forcing the viewport width to 760 is enough to have those page display “decently” on mobile browser.

Of course not on a iPhone combined with .mobi TLD.

Since some fixed width pages cannot be redesigned to be fully optimized for mobile devices and specifically to work with a “device-width” viewport, a solution is to force the “initial-scale” parameter of the viewport to “zoom” the view so it is fully displayed on first load.

One problem is that the iPhone has two different “device-width” for portrait and landscape view (320 and 480 pixels). Since one cannot know the orientation server side (while generating the HTML), the zoom factor must be set client side with Javascript.

In my case I got graphically rich site (I cannot disclose it since it’s not still official launched) wich was designed with a fixed width of 760 pixel. The initial scale factor when portrait has to be 320/760=0.421. The same factor when in landscape has to be 760/480=0,631.

To force them dynamically, the code I used was:

if (navigator.userAgent.match(/iPhone/i)) {
  if (window.orientation == 0) {
    document.getElementById("viewport").setAttribute('content', 'initial-scale = 0.421, minimum-scale = 0.421, maximum-scale = 2.0');   
  }
  else {
    document.getElementById("viewport").setAttribute('content', 'initial-scale = 0.631, minimum-scale = 0.631, maximum-scale = 2.0');
  }
}

The window.orientation value is 0 (zero) when in portrait and 90/-90 when in landscape. There is no “upside down” portrait value (you can try yourself to rotate by 180 degrees the iPhone, it remains in landscape).

Now you have a good reason to not use .mobi domains.

Thank you, Apple.