width:100% 在移动浏览器上不起作用答案

【问题标题】：width:100% doesn't work on mobile browserwidth:100% 在移动浏览器上不起作用
【发布时间】：2014-09-26 04:12:02
【问题描述】：

首先我必须说我尝试了这个网站上的所有解决方案。我想在主 div 上设置 width:100%。它适用于桌面浏览器，但不适用于移动浏览器。这是我的主要 div 的 css：

.main {
    height: 100%;
    width: 100%;    
    margin-left: auto;
    margin-right: auto;
    margin-top: -66px;
    opacity: 0.83;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    -webkit-box-shadow: 7px 7px 7px #CCC;
       -moz-box-shadow: 15px 15px 15px #CCC;
            box-shadow: 20px 20px 20px #000;
    background-color: #FFFFFF;
    color: #000000;
}

主体已定义：

html, body {
    height: 100%;
}
body {
    width: 100%;    
    height: 1100px;
    background-color: #222930;
}

标题也设置为 100%：

.header {
    height: 93px;
    width:100%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    background-color: #F0EBEB;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

我试过了：

将min-width: 100%; 设置为正文、标题、主目录
设置<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="viewport" content="width=800" />
transform: scale(.5); ...

什么问题？

编辑：当页面加载 div 为 100% 时。但我可以向右滚动 100 像素或更多像素。 overflow-x: hidden; 不起作用。

【问题讨论】：

body { margin: 0; padding: 0; }?
不起作用。我试过overflow-x:hidden，但没有帮助。当页面加载时它是 100% 宽度，但我可以向右滚动。
截图？这是在哪个移动浏览器中失败？
我终于用overflow-x:hidden for body解决了。
还有——什么是 HTML 上下文？你的头部元素是什么？

标签： html css mobile width browser

【解决方案1】：

终于修复了overflow-x:hidden。页面加载为 100% 宽度，但我可以向右滚动。

【讨论】：

有趣的是你自己的遮阳篷是-1，这是我为我的视图问题找到的唯一解决方案，+1。

【解决方案2】：

这是 Safari 浏览器的一个已知问题。您可以通过创建 CSS 视口或将 min-width 添加到 CSS 来修复它。
试试min-width: 980px;

【讨论】：

我终于用overflow-x:hidden解决了；我不尝试 Safari。