The goal is to display a non-responsive website fully zoomed out on iPhones. In other words, the site should initially fit an iPhone screen without horizontal scrolling, then user can pinch to zoom in.
Normally, i don't need a viewport meta tag for that. When there's no viewport meta tag, the site will automatically be zoomed out to fit a mobile screen without horizontal scrolling.
But not when the site is wider than ~1000px! When it's wider, only the first ~1000px fit horizontally and horizontal scrolling appears.
Only iPhones have this behavior. On Android it's fine.
I tried to force a viewport with a corresponding meta tag and discovered that iPhone only respects the meta tag if its value is below ~1000.
E. g. if i set...
<meta name="viewport" content="width=500;">
...the site is zoomed to 500px. If i set width=900, the site is zoomed to 900px.
But when i set it to...
<meta name="viewport" content="width=1400;">
...then the site displays as if the width was 1000 or so.
Again, Android respects any width correctly.
The question is: how to i fit 1400px wide site into an iPhone screen, so that there's no horizontal scrolling when it loads initially, until user pinches in to zoom?
Here's a demo to fiddle with: http://jsbin.com/luqari/edit
