Question

我一直在设计一个响应式网站，我遇到过这个问题。

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

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

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

enter image description here

这是容器代码的一部分。

    <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 可能是你的尺寸状态...... 如果您没有，请在正文标记上添加此内容...在主css中添加：

body {min-width: 100%;}

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

然后根据需要适当添加您的媒体代码。例如：

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

：）

Bootstrap上的iPhone方向问题

1 个答案: