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

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

1 个答案: