iOS Safari 15 如何删除网页顶部和底部的间距答案

【问题标题】：iOS Safari 15 how to remove the spacing at top and bottom of a webpageiOS Safari 15 如何删除网页顶部和底部的间距
【发布时间】：2021-10-01 13:33:17
【问题描述】：

正如标题所说，页面上方和下方总是有空格。以下是代码。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <link rel="stylesheet" href="./index.css">
  <title>Document</title>
</head>

<body>
  <p>Hellow World!</p>
</body>

</html>

html {
  height: 100%;
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  background-color: aquamarine;
}

body {
  margin: 0;
}

截图设备为 iPhone 12。

【问题讨论】：

标签： html css safari mobile-safari ios15

【解决方案1】：

但它在 IOS 10 和 IOS 11 中完美运行

试试这个：

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, viewport-fit=cover">

html {
padding-top: env(safe-area-inset-top);
}

body{
margin-bottom: env(safe-area-inset-bottom);
}

【讨论】：