移动设备上的视口错误和不需要的缩放答案

【问题标题】：Viewport wrong and unwanted scaling on mobile devices移动设备上的视口错误和不需要的缩放
【发布时间】：2017-12-05 14:06:38
【问题描述】：

我在 codepen 上为一个项目编写了两个“单页网站”（第二个尚未完成，导航需要更多代码才能看起来正确）。

查看我的代码并没有太大区别，所以我不明白为什么第二页在移动设备上看起来很垃圾？我可以从左到右滚动，但看不到页面的整个大小，也无法缩小到足够的程度。

Working First One

Not Working Second One

（注意：我使用了 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>

【问题讨论】：

编辑了我的答案

标签： html css iphone viewport

【解决方案1】：

您不能“缩放”的原因是因为您将用户可缩放设置为“否” - 如果您删除该部分，您应该可以这样做。

如果您只是将视口元数据留在

meta name="viewport" content="width=device-width, initial-scale=1">

这就够了。

用户可缩放的元仅在您的 codepen 中不起作用的站点上的 HTML 设置中设置（它似乎没有考虑到 codepen 中的手动头部元设置）。您的引导程序也包含在此代码笔中两次。

希望对你有帮助

【讨论】：