Oh my God, oh my God. Apple thinks it has a bright idea, but craps all over your beautiful responsive sites. Even worse, it’s being inconsistent from iPhone to iPad. I don’t know what they were smoking when they thought this up, but I want some.
OK, so what’s going on? This morning a follower pointed out an article that describes how Safari iOS makes a total fucking mess of the meta viewport when the site is hosted on a .mobi domain.
Normally, without a meta viewport, Safari’s layout viewport is about 980px wide. When your site is on a .mobi domain, though, Safari automatically applies the device-width meta viewport if you don’t have it in your code.
Compare my test hosted here on QuirksMode with this test a kind reader put on his .mobi domain. The tests are exactly the same; the outcome is different.
The linked page does not have a meta viewport applied. In the normal test this means Safari on iPhone makes the viewport 980px wide. In the .mobi test the viewport becomes 320px, though, as if a meta viewport device-width is applied.
The tests link to two more tests that are supposed to set the layout viewport to 380px and the device-width (320px for the iPhone). These work normally. So the effect appears only when no meta viewport is set.
On the iPhone, that is. The iPad behaves quite differently.
If you try the same two test pages, mine gives 980px, but the .mobi one gives 640px. Even worse, the 380px and device-width tests return again 640px, and 768px. That last value is expected: it’s the device width of the iPad. But the first two aren’t.
Tested on iPhone Safari on iOS 5 and 6; iPad on iOS 5.
| Device | No viewport | viewport 380 | viewport device-width |
|---|---|---|---|
| iPhone | Expected: 980px Actual: 320px |
380px | 320px |
| iPad | Expected: 980px Actual: 640px |
Expected: 380px Actual: 640px |
768px |
Changing the browser’s default behaviour based on top-level domain is bad enough. But implementing your own ridiculous rules wrong on the iPad is much, much worse.
If you’re creating a site that should work on the iPad and is going to be hosted on a .mobi domain, test it on the actual server. Your tests on your dev server are not enough.
And yes, I’m going to test this on other browsers, too, time allowing. So far I have ascertained that Chrome and Android WebKit on Android 4, as well as the BlackBerry PlayBook browser, do not exhibit this bug and behave normally on a .mobi domain.
![[HD Version]](http://i.imgur.com/v51lc.jpg){kind=link}
![[HD Version]](http://i.imgur.com/c9ddn.jpg){kind=link}
![[HD Version]](http://i.imgur.com/ES6sP.jpg){kind=link}
![[HD Version]](http://i.imgur.com/iev8H.jpg){kind=link}