如果键盘显示,全屏背景会自动调整大小



我设置了html背景全屏,在pc中运行良好,但在android中用户输入表单和显示键盘时出现问题,背景自动调整大小

HTML:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<h1>x</h1>
<input type="text" placeholder="XXXXXXXXXXXXX"/>
</body>
</html>

CSS:

html, body {
min-height:100%;height:100%;
}
html {
background: url(https://i.pinimg.com/originals/af/8d/63/af8d63a477078732b79ff9d9fc60873f.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}

屏幕截图:

https://prnt.sc/wd6mez-正常

https://prnt.sc/wd6mnq-问题

Android上的键盘正在降低视口高度,并且由于background-size: cover;,背景图像会自然调整大小以适应缩小的区域。

最新更新