html - 如何使用元视口(viewport) "width=device-width"获得 100% 的 div 以完全覆盖页面的宽度

Question

所以我正在尝试让我的网站适应移动浏览器。我有 2 个 CSS 文件，一个始终包含在其中，一个带有

media="screen and (max-width:500px)"

为了让它起作用，我使用了元标记

<meta name="viewport" content="width=device-width" />

只要内容包装 div 具有固定宽度，或者如果屏幕宽度小于 500 像素，这种方法就非常有效。但是当我翻转我的手机(从而获得 >500px 的宽度)时，直接在正文中将其宽度设置为 100% 的 div 被切断。我假设是因为 width=device-width 使 css 100% 等于屏幕宽度，即使网站大于屏幕也是如此。

适用于桌面浏览器(背景旨在覆盖整个文档宽度):

在(翻转的)手机或 chrome 移动仿真中。菜单的一大块被删掉了。

CSS:

#top{
    position:relative;
    background:rgba(191,186,130,1);
    height:150px;
    width:100%;
    overflow:visible;
}

有什么方法可以使 div 宽度跨越整个文档吗？我需要 javascript 来检测吗？

Answer 1

将初始比例设置为 1。

<meta name="viewport" content="width=device-width, initial-scale=1.0" />