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

标签 jquery html css viewport

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

如何让它以纵向模式填满整个屏幕?我将 JQuery 与纵向模式下的汉堡菜单一起用于我的导航列表。我也在使用带有 content="device width" 的视口(viewport)代码.如果我添加 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>

最佳答案

要完全填满您的页面,您可以设置容器 min-height: 100vh

关于jquery - 移动设备上的响应式网页太小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51793861/

相关文章:

css - 嵌套 div 的布局/格式问题。 div太多?

javascript - 如何将实时元素与存储在数据中的元素进行比较?

jquery - 使用clearfix删除空格:之后

javascript - jQuery 可拖动的排列网格

html - CSS悬停在跨度内跨度未正确应用效果。

javascript - 使我的导航栏表单搜索字段全宽

javascript - 上下滑动目标div不起作用

javascript - CSS,JavaScript样式动态表

css3 - 纯CSS丝带,简单的方法?

jquery - 如何让一个div出现在按钮下面