ios页面无法铺满屏幕

10/17/22, 14:58:49

我在webclip中 有一个全屏页面 内嵌一个iframe 外部页面 body position设置为fixed时候 body 能够铺满页面 但是iframe 无论怎么样设置 都无法填满body 底部会有一个空白区域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<style>
html{
 height:100vh
}
body, iframe{
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0
}
</style>
</head>

<body>
<iframe></iframe>
</body>
</html>

也就是 当body position fixed时候 它的内部内容空间的高度存在bug 所以不要用这种方式全屏

修复：

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

外加：

1
<style type="text/css" rel="stylesheet"> html, body { margin: 0px; padding: 0px; width: 100%; height: 100vh; position: relative; overflow: hidden; } </style>

newer:

older:

0 / 512