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.

Similar Posts

4 Comments

  1. I seriously doubt that it has anything at all to do with a .mobi domain. More likely you have a bug in your code that you haven’t discovered yet.

    1. Please, the thing has been clarified by Apple and documented on many other web sites where developers have reported the same issue.

      And we installed the site under other domains to verify the problem.

      Be sure, this is (may be was) a Safari/Apple problem.

  2. Thanks for the information, I got a huge bug putting the page online and the mobi was the cause.

    It’s very surprising that Apple do those things and overwrite our configurations.

Leave a Reply