问题描述
<!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。
解决方法
但它在 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);
}