Question

我编写了两个单页网站＆＃39;在项目的codepen（第二个没有完成，导航需要更多的代码看起来正确）。

查看我的代码没有太大区别，所以我不明白为什么第二页在移动设备上看起来像垃圾？我可以从左向右滚动，无法查看页面的整个大小，也不会缩小到足以完成此操作。

（注意：我使用了Bootstrap）

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

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

如果您只是将视口元保留在

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

这应该足够了。

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

希望这有帮助

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

1 个答案: