更新

Question

这是mobile website的QTest::keyClick()，请在手机上试用，因为它在桌面和平板电脑上看起来都很好。对于CSS，我尝试首先将100％宽度放在身体上，但似乎没有帮助。然后我将HTML的宽度设为100％，仍然无法正常工作。

我感到难过并且变得更加困惑。请帮忙！

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="icon" href="../../favicon.ico">

    <title>Việt Nam Care</title>

    <!-- Google Fonts Arvo and Font Awesome -->
    <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">

    <!-- Normalize -->
    <link rel="stylesheet" type="text/css" href="css/normalize.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" 
          ><img src="img/vietnamcare3.png" alt="Viet Nam Care"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#who">WHO WE ARE</a></li>
            <li><a href="#get-involved">GET INVOLVED</a></li>
            <li><a href="#contact-us">CONTACT US</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="jumbotron">
      <div class="container">
        <h1>Doing anything necessary to Preserve<br>Việt Nam's Future</h1>
        <!-- <p>This initiative is conducted to help create a more sustainable and enriching lifestyle among Vietnamese families and--most importantly--the children. </p> -->
        <p><a class="btn btn-danger btn-lg" href="#" role="button">Learn More &raquo;</a></p>
      </div>
    </div>

    <div id="who">
      <div class="container homepage">
          <h2>Who we Are</h2>
          <hr>
          <p>We are <a href="#">Việt Nam Care</a>. We exist to help create a more sustainable life among Vietnamese children. </p>
      </div>
    </div>


    <div id="get-involved">
      <div class="container homepage">
      <h2>Get Involved</h2>
      <hr>
        <!-- Example row of columns -->
        <div class="row">
          <div class="col-md-4">
            <span class="fa-stack fa-4x"> <!-- Money Icon -->
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-money fa-stack-1x fa-inverse"></i>
            </span>
            <h3>Donations</h3>
            <p>Want to contribute and make a difference? Donations--money, food, clothes, and school supplies--to disadvantaged children and families are most appreciated! </p>
            <p><a class="btn btn-default" href="#" role="button">Donate now &raquo;</a></p>
          </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x"> <!-- Building Icon -->
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-building fa-stack-1x fa-inverse"></i>
            </span>
            <h3>Projects</h3>
            <p>Volunteer in meaningful projects that ranges from helping build small infrastructures for local communities to teaching English to disadvantaged childlren. </p>
            <p><a class="btn btn-default" href="#" role="button">Volunteer now &raquo;</a></p>
         </div>
          <div class="col-md-4">
            <span class="fa-stack fa-4x"> <!-- users Icon -->
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-users fa-stack-1x fa-inverse"></i>
            </span>
            <h3>Sponsors</h3>
            <p>Give a child the opportunity to have a better life through sponsorship. Readily available resources made for the child will help shape their futures!</p>
            <p><a class="btn btn-default" href="#" role="button">Help now &raquo;</a></p>
          </div>
        </div>
      </div> <!-- /container -->
    </div>

    <footer>
      <div class="container">
        <p><img src="img/vietnamcare5.png" alt="vietnamcare_logo"></p>
      </div>
    </footer>



    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

这是我的CSS：

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
    width: auto;
    height: 80%;
}

/* Top Left Viet Nam Care Word */
/* a.navbar-brand img {
    margin: 0px;
    padding: 0px;
    position: relative;
    top: -30px;
    left: -10px;
} */

/* Vietnamese Children Jumbotron Image */
nav div div a img {
    position: relative;
    display: inline-block;
    top: -10px;
    width: 90%;
}

ul.nav, .jumbotron h1 {
    font-family: 'Arvo', courier, serif;
}

ul.nav {
    font-size: 13px;
}

footer {
    background-color: #f74c3c;
    padding-top: 150px;
    padding-bottom: 30px;
}

#get-involved {
    background-color: #f5f5f5;
}

.jumbotron {
    text-align: center;
    margin-bottom: 0;
    background-image:url("../img/vietkids.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: fixed;
    color: white;
    height: 98%;
}

.jumbotron h1 {
    margin-top: 0;
    margin-bottom: 50px;
}

.jumbotron p {
    margin-bottom: 30px;
    font-weight: 100;
    padding: 0px 50px;
}

.jumbotron img {
    margin: 0;
    padding: 0;
    height: 200px;
    width: 120px;
}

/* .jumbo_paragraph {
    color: red;
    border: 1px solid green;
    width: 90%;
    margin: 0 auto;
} */

.btn-lg {
    font-size: 2.25empx;
}

nav img {
    position: relative;
    bottom: 10px;
    left: 10px;
}

.homepage {
    text-align: center;
    padding: 30px 0px;
}

.homepage h2, .homepage h3 {
    color: #e74c3c;
    font-family: 'Arvo', courier, serif;
    text-transform: uppercase;
}
.homepage h2 {
    font-size: 30px;
}

.homepage h3 {
    font-size: 26px;
}

.homepage p {
    font-size: 19px;
}

.homepage a {
    color: #e74c3c;
}

.homepage a:hover {
    color: #e74c3c;
    text-decoration: none;
    opacity: 0.8;
}

/* All Horizontal Lines in class Homepage */
.homepage hr {
    border-top: 1px solid #e74c3c;
    width: 160px;
    margin-top: 15px;
}

/* Responsive Styling */

@media (max-width: 1199px) {
    .jumbotron h1 {
        font-size: 56px;
        margin-bottom: 30px;
    }
}

@media (max-width: 991px) {
    .jumbotron h1 {
        font-size: 44px;
    }

    .jumbotron p {
        padding: 0 10px;
    }

    #get-involved .col-md-4 {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .jumbotron h1 {
        font-size: 24px;
    }

    .jumbotron p {
        font-size: 16px;
        padding: 0;
    }

    .btn-lg {
        font-size: 18px;
    }

    .homepage p {
        font-size: 18px;
    }

    footer img {
        width: 80%;
    }
}

Answer 1

将以下内容添加为CSS的最后一行：

div { max-width: 100%; }

可能你有一个定义为100％宽度的div，加上额外的填充，因此页面上的某些元素的宽度大于100％，导致右侧的间隙。这个CSS将覆盖它。

我一次删除了您网页上的div - 如果删除除页脚div之外的所有内容，则间隙消失。所以问题可以在页面上页脚div之前的某个元素中找到。

编辑：如果您还没有，那么在浏览器检查器中使用模拟器（如Xcode的模拟器）可以帮助您在移动设备上调试此问题。

我在浏览器检查器中运行了这个，看看这个CSS修复实际上可以解决问题：

$("div").css("max-width","100%")

Answer 2

更新

我相信我发现了这个问题。遵循以下步骤：

注释掉或移除<head>中的以下标记：

<!-- Google Fonts Arvo and Font Awesome -->
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">

<!-- Normalize -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">

将其添加到<head>：

 <!-- Normalize, Bootstrap, and Font Awesome core CSS -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/g/normalize@3.0.3,bootstrap@3.3.6(css/bootstrap.min.css),fontawesome@4.5.0">
 <!-- Google Fonts Arvo -->
 <link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>

从此规则集中删除width: auto;：

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
  /*width: auto;<==[Remove this]*/
    height: 80%;
}

清除浏览器缓存并刷新。

使用normalize.css或reset.css将<link>标记放在任何其他<link>标记之前。第一个新的<link>将Normalize，Bootstrap和Font Awesome CSS文件组合为jsDelivr CDN提供的一个文件。这会将您的HTTP请求减少2，这将减少您的整体延迟（页面加载速度会更快。）

width: auto是一个优先级高于min-width: 100vw;的属性，因为它位于CSS文件的下方。虽然width和min-width属性不同，但它们都会影响身体的垂直长度。

尝试vw

1vw =当前视口宽度的1/100，即宽度的1％

html, body {
    min-width: 100vw;
}

.btn-lg {
    font-size: 2.25empx;
}                 ^---^======[ px or em, not both]

为什么我的网站没有延伸到移动设备的宽度？

2 个答案:

更新