为什么 iOS 10 上的 min-height 100vh 会导致大窗口？答案

【问题标题】：Why min-height 100vh on iOS 10 results in large window?为什么 iOS 10 上的 min-height 100vh 会导致大窗口？
【发布时间】：2019-03-04 02:06:35
【问题描述】：

有人可以向我解释为什么当我将部分的 min-height 设置为 calc(100vh) 时，它会导致 iOS 10 (iPhone SE) 上的窗口尺寸变大而文本变小吗？

section {
  display: flex;
  display: -webkit-flex;
  display: -webkit-box;
  align-items: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  min-height: calc(100vh);
  text-align: center;
}

section div {
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    <section>
      <div>
        <h1>Title</h1>
        <h2>Description</h2>
      </div>
    </section>
  </body>
</html>

【问题讨论】：

您必须在问题本身中包含重现问题所需的代码。我们不能开始调试整个网站，因为您没有提及您正在谈论的部分......请使用Minimal, Complete, and Verifiable example更新您的问题，我们很乐意提供帮助:)跨度>
检查您的元视口：css-tricks.com/snippets/html/responsive-meta-tag
是的，有帮助。当我没有定义移动 Safari 时，它的默认行为是什么？
可能是同一个问题：stackoverflow.com/questions/37112218/… 从这对我来说是.full-heigth { min-height: 100vh; min-height: -webkit-fill-available}

标签： html ios css mobile-safari

【解决方案1】：

您是否设置了默认的车身样式。 body{margin:0; padding:0} 如果没有，请试试这个。如果您使用上面的html，css，它可能会解决您的问题。

【讨论】：