Question

首先，我必须说我在这个网站上尝试了所有解决方案。我想在主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%;设置为body，header，main
设置<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="viewport" content="width=800" />
transform: scale(.5); ...

什么是问题？

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

Answer 1

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

Answer 2

最后修复overflow-x：hidden。页面加载宽度为100％但我可以向右滚动。

宽度：100％不适用于移动浏览器

2 个答案: