我在 codepen 上为一个元素编写了两个“单页网站”(第二个未完成，导航需要更多代码才能正常显示)。
看我的代码没有太大区别，所以我不明白为什么第二页在移动设备上看起来很垃圾？ 我可以从左向右滚动，但看不到页面的整个大小，也无法缩小到足以做到这一点。
(注意:我为这些使用了 Bootstrap)
body {
font-family: Raleway;
background-image: no-repeat center center fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: #92b8db;
color: white;
display: block;
margin: 0;
}
h1 {
text-align: center;
font-size: 70px;
margin: 2% 0 3.5% 0;
text-transform: uppercase;
}
nav {
text-align: center;
display: inline-block;
margin: 25px;
float: none;
overflow: none;
}
li,
ul {
text-decoration: none;
display: inline-block;
margin: 5px 20px;
}
h2 {
margin: 25px 0 0 20%;
}
p {
font-size: 20px;
margin: 5px 10% 20px 10%;
text-align: justify;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" , user-scalable=no>
<body background="http://static.tumblr.com/38d4fa35aa182890b82bb598a50c8d8b/hti7sqq/7h2orgi26/tumblr_static_4g8ybvq3e4ys8sk4sgowscko8.jpg">
<div class="container-fluid">
<div class="row">
<div class="col">
<h2>Heartcube</h2>
</div>
<div class="col">
</div>
<div class="col">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid container">
<h1> Betti Bremm</h1>
<p>
We are giants...
</p>
</div>
</div>
</body>最佳答案
您不能“缩放”的原因是您将用户可缩放设置为“否”——如果您删除该部分，您应该可以。
如果您只是将视口(viewport)元保留在
meta name="viewport" content="width=device-width, initial-scale=1">
这应该足够了。
用户可缩放的元仅在网站上的 HTML 设置中设置，但在您的 codepen 中不起作用(它似乎没有考虑 codepen 中的手动 head 元设置)。您的 Bootstrap 也包含在此代码笔中两次。
希望对你有帮助
关于html - 移动设备上的视口(viewport)错误和不需要的缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44866351/