Viewport元标记在移动版Safari

Question

我的网站有一个900像素宽的菜单元素。 我希望使用视口标记将900像素缩放到移动屏幕的宽度 - 但这似乎不起作用：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

我的CSS只有一个有任何宽度的元素，这是顶级菜单：

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;
}

我希望网站能够很好地适应浏览器，但在手机上视口太小而在ipad上它太大了。如何让900像素宽的网站适合任何移动视口？

Codepen

也许我误解了视口是如何工作的。我添加了一个屏幕截图，显示了我追求的结果。我怎么能做到这一点？菜单始终显示为宽（900px），并始终填充设备的整个宽度。

Answer 1

从initial-scale=1元标记中删除viewport。

  

initial-scale属性控制页面的缩放级别   先加载。

简而言之，它告诉浏览器以定义的大小加载页面，换句话说，使用initial-scale=1页面的每个像素将获得视口的一个像素。

由于您的尺寸定义为px单位，因此可以防止您所期望的“缩放”。

Answer 2

您可以将视口宽度设置为900px，让设备为您处理缩放。

<meta name="viewport" content="width=900px, initial-scale=1, user-scalable=no">