Question

我尝试设置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之间的空格，右边方面较小。所以我设置content margin-right比左边大，使它看起来像中心但我想知道为什么并找到完美的方式

我使用meta标签是否有问题？如果我删除元标记，则垂直和水平模式都很好

 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>

Answer 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/，

我希望，它可以帮到你。

Answer 2

您的容器每侧有100％宽度+ 1px边框，因此大于100％。

尝试以下解决方案之一：

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


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


.container{
    max-width: 100%;
}

移动版全宽100％，移除空间右侧

2 个答案: