个人中心
gpt4 book ai didi

javascript - 为什么我的网站无法拉伸(stretch)至移动设备的宽度？

转载 作者：行者123 更新时间：2023-11-28 06:15:33 25 4
gpt4 key购买 nike

这是mobile website请在手机上尝试一下，因为它在台式机和平板电脑上看起来都不错。对于 CSS，我尝试将 100% 的 body 宽度放在第一位，但似乎没有帮助。然后我把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%;
    }
}

最佳答案

更新

我相信我发现了问题。请按照以下步骤操作:

  1. 注释或删除 <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">

  2. 将此添加到 <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'>

  3. 删除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%;
    }

  4. 清除浏览器缓存并刷新。

当使用 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是不同的属性，它们都会影响 body 的垂直长度。

<小时/>

尝试vw

1vw = 当前视口(viewport)宽度的1/100，即宽度的1%

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

顺便说一句，您可能想要选择 px 或 em，而不是两者:

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

关于javascript - 为什么我的网站无法拉伸(stretch)至移动设备的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36000153/

25 4 0
文章推荐： javascript - 使 jQuery 线条动画在滚动上移动
文章推荐： ios - TableView 仅在屏幕旋转后更新
文章推荐： ios - 我需要从索引 1 传递字符串值。我在 swift 1.2 中有代码，但我无法在 swift 3 中获得所需的输出
文章推荐： javascript - PHP:如何根据另一个选择的选择更改选择的值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com