我有一个网站,我已经做出响应。该网站在浏览器中正确加载。但是在手机本身上,网站的宽度是正确的,但在纵向模式下,高度只有屏幕的一半,字体很小。在横向它完美加载。
如何让它以纵向模式填满整个屏幕?我将 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>"A Marching Band Exhibition"</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/