如何使用meta视口“width = device-width”获得100％的div以完全覆盖页面的宽度

Question

所以我试图让我的网站适应移动浏览器。我有2个CSS文件，一个总是包含在内，另一个用

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

要实现这一点，我正在使用元标记

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

这很有效，内容包装div具有固定宽度，或者如果屏幕宽度小于500px。但是当我翻转手机（从而获得> 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" />