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