Div 高度（大众单位？）在 IOS Safari 中不起作用答案

【问题标题】：Div height (vw units?) not working in IOS safariDiv 高度（大众单位？）在 IOS Safari 中不起作用
【发布时间】：2016-12-23 19:04:28
【问题描述】：

http://codepen.io/anon/pen/aBWvMX

预期的行为是，在大窗口大小时，黄色和红色 div 彼此相邻，而在较小的窗口中，它们堆叠在顶部并且可以滚动。

这适用于 PC 上的 Chrome、Firefox、IE。

这适用于 Mac 上的 Chrome、Firefox、Safari。

这适用于 Android 上的 Chrome。

这不适用于 IOS 设备上的 Chrome 或 Safari！！！

而在 IOS 设备上，这被渲染为一个巨大的 div，对于视口来说太高了。另一个 div 根本没有出现。

我尝试了多种方法的组合，而我取得一些轻微成功的唯一方法是在 css 中使用 @media 查询。我宁愿不这样做，因为我不能保证支持所有设备。

HTML：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, target-densitydpi=device-dpi">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="container-fluid" id="app">
    <div class="row" id="bg">
      <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12" id="pic">
        <div class="leftlayer-gradient hidden-md hidden-lg">
        </div>
      </div>
      <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12" id="details">
        <div class="rightlayer">
        </div>
      </div>
    </div>
  </div>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

CSS：

#pic, #details {
  height: 100vh;
}

#details {
  background-color: red;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: left;
}

#pic {
  background-color: yellow;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: right;
}

.rightlayer {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.leftlayer-gradient {
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* Standard syntax (must be last) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

【问题讨论】：

标签： html ios css safari

【解决方案1】：

已解决：

问题与视口或与浏览器/操作系统的兼容性无关。

我使用来自我的 DNS 提供商的屏蔽转发，而他们只是通过 iframe 转发到该站点（糟糕！）。

如果您使用 GoDaddy，您可能会遇到同样的问题。

【讨论】：