移动设备上的响应式网页太小

Question

我有一个响应式网站。该网站在浏览器中正确加载。但是在手机本身上，网站的宽度是正确的，但在纵向模式下，高度只有屏幕的一半，字体很小。在横向模式下，它可以完美加载。

如何让它以纵向模式填满整个屏幕？我将 JQuery 与纵向模式下的汉堡菜单一起用于我的导航列表。我也在使用带有content="device width" 的视口代码。如果我添加initial-scale=1，这会以放大模式加载整个网站，在这种模式下我必须水平和垂直滚动。

<head>
    <meta charset="UTF-8" />

    <!-- This add the Angular JS to the program -->  
    <script  src="js/index.js"></script>
    <script  src="js/angular.min.js"></script>
    <script  src="js/angular-route.min.js"></script>
    <script  src="js/angular-cookies.min.js"></script>
    <script  src="js/app.js"></script>

    <!-- This add the JQuery to the program -->  
    <script src="js/jquery-3.3.1.js"></script>
    <script  src="js/menu.js"></script>


    <!-- Responsive Design Viewport code -->
    <meta name="viewport" content="width=device-width">

    <link rel="Stylesheet" href="css/bootstrap.min.css" />
    <link rel="Stylesheet" href="css/styles.css" type="text/css"/>
    <link rel="Stylesheet" href="css/responsive.css" media="screen and (max-width: 900px)"/>


</head>

<!-- Webcontainer  -->
<div id="webcontainer">

    <!-- Headersection outlines the header section of the webcontainer -->

  <div id="headersection">
    <div id="header-topblank-sec">
       <div id="horiznav">
          <a class="burger-menu"></a>
          <!-- Menu Items -->
          <ul> 
            <li>
               <a href="#/home">HOME</a>
               <a href="#/about">ABOUT</a>
               <a href="#/matchup">THE MATCHUP</a>
               <a href="#/vote">VOTE</a>
       <a href="#/contact">CONTACT</a>
            </li>
          </ul>
       </div>           <!-- Loads the blank color section -->


    </div>

    <div id="headerimage">
       <!-- Load the logo -->
   <div id="header-img-sec">
    <img src="img/Clash-Head-Image-alt-size.png">
        </div>
    </div>



<div id="header-botblank-sec"> 
       <!-- Loads the blank color section and subtitle-->
   <div id="clash_subtitle">
       <p><em>&quot;A Marching Band Exhibition&quot</em></p>
       </div>
    </div>


  </div>

    <!-- Websections  -->
    <div id="websections">


       <!-- Defines the Right Section of Websections -->
       <!-- <div id="rightsection"> -->
       <div id="web-body">              

         <div ng-view=""></div>
       </div>

    </div>

</div>
</body>

Answer 1

要填满你的页面，你可以设置容器min-height: 100vh