Viewport在移动设备上出错并且不需要缩放

Question

我在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>

Answer 1

您无法“缩放”的原因是您将用户可扩展设置为“否” - 如果您删除该部分，则应该能够。

如果你只是离开视口元素

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

这应该足够了。

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

希望这可以帮助

Viewport在移动设备上出错并且不需要缩放

问题描述投票：1回答：1

1个回答

最新问题

Viewport在移动设备上出错并且不需要缩放

问题描述 投票：1回答：1

1个回答

最新问题

问题描述投票：1回答：1