所以我正在尝试让我的网站适应移动浏览器。我有 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 来检测吗?
最佳答案
将初始比例设置为 1。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
关于html - 如何使用元视口(viewport) "width=device-width"获得 100% 的 div 以完全覆盖页面的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25827101/