Question

我将 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 - 问题

Answer 1

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

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

1 个答案: