手机版全宽100%，去掉右边的空格答案

【问题标题】：mobile version full width 100%, remove space right side手机版全宽100%，去掉右边的空格
【发布时间】：2014-11-18 06:55:07
【问题描述】：

我尝试设置container全宽高边框线的样式，在pc版上没问题，但在iPhone上测试，右侧有一点空间（10px）。
但只有在垂直模式下才会出现这种情况，旋转到水平是可以的。

为什么？如何解决？

更新
我尝试添加 box-sizing:border-box 不起作用。
现在我正在使用overflow: hidden (Responsive website on iPhone - unwanted white space on rotate from landscape to portrait) 不让用户滚动查看空白，但container 边界线和content 之间的空间较小，右侧更小。所以我将contentmargin-right设置为比左边大，使它看起来仍然像中心。
但我想知道原因并找到完美的方法

我使用元标记是否有问题？如果我删除元标记，垂直和水平模式都可以

 html, body {
   width: 100%;
   height: 100%;
 }
 .container {
   width: 100%;
   min-height: 100%;
   border: 10px solid #000000;
 }
.content {
  width: 100%;
  margin: 0 auto;
}

html

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  </head>
  <body>
    <div class="container">
      <div class="content"></div>
    </dvi>
  </body>
</html>

【问题讨论】：

您的容器是 100% 宽度并且有一个边框，因此比 100% 宽度要小一些。使用box-sizing: border-box;
即使在 PC 上也应该没问题，因为 UA 将 margin 应用到 <body> 并且计算出的 height/width 的 .container 超过了可用空间<body> 因为添加了边框。试试这个：jsbin.com/nocewi/1/edit
感谢回复添加 box-sizing 并设置边距 0 没有任何变化，不起作用...我仍然可以滚动到右侧查看空间
不知道它是否能解决你的问题，但你的 CSS 中没有错误：body{} is inside the html {}
box-sizing:border-box; 尝试像这样使用它*{margin:0px;padding:0px;box-sizing: border-box;-ms-box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box} 我担心的是尝试在 mozilla、chrome 和 safari 上使用属性破解

标签： html css mobile meta

【解决方案1】：

HTML

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    </head>
    <body>
        <div id="solution" class="container">
            <div class="content"></div>
        </div>
    </body>
    </html>

CSS

html, body {
    width: auto;
    height: 100%;
}

.content {
    width: 100%;
    margin: 0 auto;
    background:#000;
    height:200px;  
}

.container {
    width: 100%;
    padding: 10px;
    border: 30px solid #999;
}

#solution {
    box-sizing: border-box;
}

检查下面的小提琴http://jsfiddle.net/manjunath_siddappa/53grcpdv/,

希望对你有帮助。

【讨论】：

【解决方案2】：

您的容器每边都有 100% 的宽度 + 1px 的边框，因此使其大于 100%。

尝试以下解决方案之一：

.container{
    box-sizing: border-box;
}


.container{
    width: calc(100% - 2px);
}


.container{
    max-width: 100%;
}

【讨论】：

感谢回复，我每个都试过了，但还是不行。我仍然可以滚动到右边看到空间
OK 也试试添加这个：.container{overflow: hidden;}
我之前试过这个，但是空白仍然在那里，所以如果容器内的内容是 margin:0 auto 它仍然不是中心。内容和大纲右侧之间的空间更小。我也试过 move content margin-right the container border line width ，但我试图找到解决这个问题的最佳方法，知道为什么吗？