X

ios页面无法铺满屏幕

2022/10/17

我在webclip中 有一个全屏页面 内嵌一个iframe

外部页面 body position设置为fixed时候

body 能够铺满页面

但是iframe 无论怎么样设置 都无法填满body

底部会有一个空白区域

<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

所以不要用这种方式全屏

修复:

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

外加:

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