如果我将以下元标记添加到我的移动网页，则 block 级元素之间在垂直方向上会有额外的空间。
<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>
最佳答案
您的问题很可能是您的视口(viewport)。它设置为 1.2，而不是 1。
改为添加这一行
<meta name="viewport" content="width=device-width, initial-scale=1">
关于html - 在 Chrome 中设置 initial-scale=1.x 时， block 级元素之间有额外的垂直空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31811003/