使页面在所有移动设备上都具有响应性答案

【问题标题】：Making a page responsive on all Mobile Devices使页面在所有移动设备上都具有响应性
【发布时间】：2019-03-01 17:26:56
【问题描述】：

我是 Bootstrap 4 的新手，我想创建一个在所有移动设备上都应该完全响应的页面。我不知道如何让它完全响应，就好像我正在改变图像的宽度一样，它开始水平滚动，这是我不想要的。我编写了一个简单的代码，但我不知道为什么它不能在移动设备上正常运行。

.img-responsive{
    margin:auto;
    width:100px;
    height:100px;
}

.bg-success
{
    margin-top:2%;
}
.bg-warning,.bg-danger
{
    margin-top:.3%;
}
.bg-danger
{
    margin-top:.3%;
}
p{
    text-align: center;
    font-size:20px;
    margin-top:5%;
    margin-bottom:5%;
   
}
.soc .bg-success{
    background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
     <title>Bootstrap 4 Website Example</title>
      <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <link rel="stylesheet" href="custom_1.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<!--BODY-->
<body>
<!--Section1-->
 
  <div class="container">
    <div class="row bg-success">
      <div class=" col-xs-12 col-sm-12 col-md-9 col-lg-12">
        <img class="img-responsive" src="https://images.unsplash.com/photo-1490644120458-f5e5c71d2ab0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80">
      </div>
    </div>
    
<!--Section2-->    
  <div class="row bg-danger">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <p>Please Leave Feedback For<br>"BRAND"
         </p>
     </div>
 </div>
    
<!--Section3-->  
  <div class="row bg-danger">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <p>Would You Recommend Us To Others?
        </p>
      </div>
  </div>

  <!--Button Section-->
  <div class="row bg-success soc">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button class="btn btn-primary btn-block btn-lg">Yes, I would</button>
          <button class="btn btn-primary btn-block btn-lg">No, Thankyou</button>
        
      </div>
  </div>
  </div>
 </body>
 </html>

【问题讨论】：

我添加了一个假人，你能告诉我你想要什么。谢谢
实际上我希望你在我的代码中进行更正......并使其在所有移动设备上都能响应......
@XenioGracias 你在哪里添加了假人？
你更新了你的代码吧？？
@XenioGracias 不，我没有。你能建议我对我的代码进行一些更改，以便我可以使我的页面具有移动响应能力吗？

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

据我了解，请尝试此代码

注意：- 根据您的要求应用最大宽度

    .img-responsive {
        margin: auto;
        width: 100%;
        height: auto;
        max-width: 300px;
      }

【讨论】：

图像部分适用于移动设备，但不适用于 I-pad pro。图像仍与屏幕左侧对齐。网络按钮也没有响应。如果您建议我进行一些整体更改以便我可以使我的整个页面具有移动响应能力，那将是一个很大的帮助。谢谢！