Html 为什么iPhone会将内容推到视区之外？

我的网站应该是这样的，在安卓设备上也是这样。我在iphone上遇到了一些问题，在其中一些设备上进行了测试，看起来像

有没有关于如何解决这个问题的建议？供您参考，请访问www.teamthie.com，以下是相关代码：

.slide {position: relative;
padding-top: 0px;
height: 100vh;
-webkit-height: 100%;
width: 100%;
box-sizing: border-box;
font-family: Fjalla One;
}
.heading {
width: 45%;
position: absolute;
top: 60%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
right: 5%;
color: rgba(255,255,255,.9);
font-weight: 700;
text-align: right;
z-index: 10;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
.heading-date{
text-transform: uppercase;
font-size: 17px;
}
.heading-big {
text-transform: uppercase;
font-size: 52px;
}
.heading-small {
font-size: 16px;
font-weight: 400;
font-family: Fjalla One;
}
.heading-small a {
text-decoration: none;
font-weight: 700;
color: #60CAFE;
}

---

仅供参考发布您的代码会很有帮助，但您可以尝试以下1）更改显示：内联块；显示：内联表；（或表格）有时修复定位问题

这里有一些关于我在iPhone和iPhone中使用的视口的信息

---

您还可以在CSS中定义视口，而不是使用meta标记。检查“更多信息”链接。

标记：寻求调试帮助的问题（“为什么此代码不起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现该问题所需的最短代码。你可以在你的问题中添加一个代码样本，或者（最好）一个包含足够HTML/CSS的代码片段来重现这个问题。在我编辑这篇文章以包含代码之前，你先告诉我吧。目前正在阅读您的链接，谢谢。没问题，希望能有所帮助：）