javascript - 如何在此示例 Codepen 上使用 Ipad Safari？ (看起来像一场噩梦)

Question

我一直在 Freecodecamp 中进行练习，现在我正在摆弄个人作品集练习中的内容，只是尝试不同的功能。我的示例作品集网站在大多数桌面浏览器中看起来都不错，并且我知道如何使用一些媒体查询修复移动 android/kindle fire 版本。

但是，我在 iPad Safari 上测试了 codepen 网站，结果让我想把 iPad 扔出窗外。它甚至不显示任何 html 内容，而且实际上什么也不起作用——这绝对是令人厌恶的。

任何人都可以给我一些提示，告诉我 Safari 移动浏览器与其他浏览器相比到底出了什么问题吗？它是如此困惑，我真的不知道从哪里开始......

代码笔:https://codepen.io/hsinwang5/pen/yOpZag

示例图像(太大了......):

有问题的CSS:

  html, body {
  height: 100%;
}

nav {
  position: fixed;
  background-color: black;
  width: 50vw;
  margin-left: 23.7vw;
  height: 4em;
  top: 0em;
  transition: top .2s ease-in-out;
  border-radius: 25px;
}

.scroll-up {
  top: -40em;
  transition: top 1.5s ease-in-out;
}

.nav {
  margin-top: 5px;
  text-align: center;
  padding-right: .4em;
  font-family: covered by your grace, sans serif;
}

nav a {
  margin-left: 1em;
  font-size: 2em;
  color: green;
}

#hero {
  margin-top: -20px;
  /*image taken from topwallpapers.pw*/
  background-image: url("http://i1053.photobucket.com/albums/s462/HsinWang5/dark_animals_grayscale_lions_black_background_lion_profile_desktop_1900x1200_hd-wallpaper-733464_zpsuczcstcl.jpg");
  height: 100vh;
  background-size: cover;
}

h1 {
  padding-top: 25vh;
}

h1, h4 {
  color: gray;
  font-family: chewy, sans serif;
}

.main-content {
  /*image taken from topwallpapers.pw*/
  background-image: url("http://i1053.photobucket.com/albums/s462/HsinWang5/CroppedLion_zpsbk5znhxr.jpg");
  margin-top: -20px;
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  font-family: chewy, sans serif;
  color: yellow;
}

.static {
  background-attachment: fixed;
}

.main-content p {
  margin-top: 20px;
}

.main-content h2 {
  font-size: 3.7em;
  padding-top: 1%;
}

#portfolio {
  margin-top: 30vh;
}

.project {
  margin-bottom: 80vh;
  margin-left: 5vw;
  width: 350px;
  color: green;
}

.project h3 {
  text-align: center;
}

#end-portfolio {
  margin-bottom: 0;
  padding-bottom: 65vh;
}

footer {
  background-image: url("http://i1053.photobucket.com/albums/s462/HsinWang5/lion_lion_cub_family_cub_caring_baby_sunshine_40132_1920x1080_zpsae93h3zy.jpg");
  background-size: 100vw 100vh;
  margin-top: -20px;
  height: 100vh;
}

footer h3 {
  color: black;
  font-size: 3em;
  padding-top: 5vh;
}

Answer 1

这只是为遇到同样问题的人提供的更新。我已经缩小范围，问题似乎只发生在 iOS 版 Safari 中，当在 codepen 上运行时。看起来 codepen 在 i-frame 中运行你的网站，而移动 Safari 在框架中使用 VH 和 VW 单位时会变得非常奇怪。

使用调试 View 修复了这个问题，所以这基本上更多是一个 codepen 问题，而不是 CSS 问题。调试 View 基本上消除了 codepen 的臃肿，只运行纯代码 - 唯一的问题是只有帐户所有者才能使用调试 View 。

This page包含解释问题的重要信息，甚至提供了解决 i 帧问题的代码。不过，我还没有确认它是否有效，因为我无法再使用有问题的 ipad(是从 friend 那里借来的)。

我还确认大多数移动浏览器不支持固定背景或恒定滚动事件，因此这些问题是预料之中的。