如果将以下meta标签添加到我的移动网页中，则块级元素之间在垂直方向上会有多余的空间。<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
该如何解决呢？
完整的代码：
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
<title>test</title>
<style type="text/css">
html,body
{width:100%;height: 100%;margin:0px;padding:0px;}
.slide-container
{height:200px;width:100%;background-color:black;color:white;
box-sizing:border-box;
box-shadow:none;
border:0px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<article style="height:100%;width:100%;">
<section class="slide-container" style="">
1
</section>
<section class="slide-container">2</section>
<section class="slide-container">
3
</section>
<section class="slide-container">
4
</section>
</article>
</body>
</html>
最佳答案
您的问题是视口极有可能。它设置为1.2，而不是1。
添加此行
<meta name="viewport" content="width=device-width, initial-scale=1">
关于css - Web应用程序-在Chrome中设置initial-scale = 1.x时，块级元素之间存在额外的垂直空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31811003/