html - Bootstrap 上的 iPhone 方向问题

Question

我一直在设计一个响应式网站并且遇到了这个问题。

首先，从纵向模式更改为横向模式不会触发任何响应 react 。它只是放大了网站。我确保不会发生这种情况:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

但是，当用户改回纵向模式时，右侧会出现一个空白区域。这是一个截图。

这里是容器的部分代码。

    <div class="about">
        <div class="container">
            <div class="row">
                <div class="span12">
                    <div class="headlines"><h1>Hello..</h1></div>
                    <div class="row">
                        <div class="span6">
                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>

                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>
                        </div>
                        <div class="span6">

                            <p>
                                Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
                            </p>

                        </div>
                    </div>
                     <hr class="soften"/>

                            <div class="about-hire">
                                <h3 >Hello?</h3><a href="#" class="btn-about">Let's talk!</a>
                            </div>
                </div>
            </div>
        </div>
    </div>

这是对应的CSS。

.about {
     text-align: center;
     padding: 100px 0 100px 0;
     background-color: #fff;

}

.about .container {

    position: relative;
    z-index: 9;
}


 @media (max-width: 767px) {


  .about {
    margin-left: -20px;
    margin-right: -20px;

  }

   .about .container {
    margin-left: 20px;
    margin-right: 20px;

  }



 }

非常感谢任何帮助。

Answer 1

我能想到两件事:

1.规模应该是这样的:

<meta name="viewport" content="width=device-width, initial-scale=1">

2.可能是您的尺寸状态...如果你没有它，请在你的 body 标签上添加它......在你的主 css 中:

body {min-width: 100%;}

如果你想具体一点，你可以从这个开始: body {min-width: 1024px;}

然后根据需要适本地添加您的媒体代码。示例:

@media only screen and ( max-width: 640px) {blah}

:)