Viewport meta tag has no effect in mobile safari
<p>I have a website that has a menu element that is exactly 900 pixels wide.
I want the 900 pixels to be scaled to the width of mobile screens using the viewport tag - but this doesn't seem to work:</p>

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt;
</code></pre>

<p>My CSS has only one element that has any width, this is the top menu:</p>

<pre><code>body {
    background-color:#6C88FF;
    overflow:hidden;
    margin:0px; padding:0px;
}

menu {
    background-image: url(../images/menu.png);
    width: 900px; height: 80px;
    position: absolute;
    display: block;
    margin:0px; padding:0px;
}
</code></pre>

<p>I would expect the website to fit nicely in the browser, but on phones the viewport is too small and on ipad it is too big. How do I get the 900-pixel wide website to fit nicely in any mobile viewport?</p>

<p><a href="https://i.stack.imgur.com/EhXtg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EhXtg.png" alt="Viewport misbehaves"></a></p>

<p><a href="http://codepen.io/eerk/pen/NrGQqX" rel="nofollow noreferrer">Codepen</a></p>

<p>Perhaps I am misunderstanding how viewport works. I have added a screenshot that shows the result I am after. How else would I achieve this? The menu is always displayed as wide as it is (900px), and always fills the entire width of the device.</p>

<p><a href="https://i.stack.imgur.com/P8t6r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/P8t6r.png" alt="Desired result"></a></p>