如何在此示例代码笔上使用 Ipad Safari？（它看起来像一场噩梦）答案

【问题标题】：How do I work with Ipad Safari on this example codepen? (it looks like a nightmare)如何在此示例代码笔上使用 Ipad Safari？（它看起来像一场噩梦）
【发布时间】：2016-07-31 05:32:27
【问题描述】：

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

但是，我在 Ipad Safari 上测试了 codepen 网站，结果让我想把我的 ipad 扔出窗外。它甚至没有显示任何 html 内容，而且几乎没有任何效果 - 这绝对是可憎的。

谁能给我一些提示，说明 Safari 移动浏览器与其他所有浏览器相比出了什么问题？太乱了，我真的不确定从哪里开始......

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

【问题讨论】：

我很欣赏你的热情。认为不清楚 iPad 有什么问题？也许截图会更清楚地说明这一点。
整个英雄屏幕被炸得很大，在英雄部分结束时它会停止滚动，所以英雄部分下面的所有内容都会被切断。 Kinda 似乎将“100VH 100VW”解释为 60 英寸大屏幕电视。
Hmm.. 尝试添加视口元标记 <meta name="viewport" content="width=device-width, initial-scale=1"> codepen 允许您从 HTML 设置模式添加它
嗯...我试过了，现在该站点在调试视图下看起来可以管理，但在编辑器/详细信息/完整页面视图中仍然完全混乱。我可能会变得专业并测试实时视图，看看我得到了什么。我会尝试发布一个屏幕截图。
就个人而言，我会在开发服务器上对此进行测试，而不是依赖于 codepen 以及所有可能出现在您的内容中的站点特定错误。我在我的 iPad 上测试了这个网站，它肯定不能正常工作。 Id 链接您的实时站点，更容易调试。

标签： javascript ios css ipad safari

【解决方案1】：

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

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

This page 包含解释问题的重要信息，甚至提供修复 i-frame 问题的代码。但是我还没有确认它是否有效，因为我不再可以访问有问题的 ipad（从朋友那里借来的）。

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

【讨论】：