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

【问题标题】：Full screen background auto resize if keyboard show如果键盘显示，全屏背景自动调整大小
【发布时间】：2020-12-31 03:25:53
【问题描述】：

我设置了 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 - 问题

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

那么，如何解决我的问题
根据您的操作，您可能可以将背景移动到单独的 div 中，为其赋予自己的高度，而不是基于视口高度，因此任何视口调整大小都不会影响它。除此之外，我认为它必须是某种 JavaScript 解决方案，其他人以前曾试图解决它：stackoverflow.com/questions/52384678/… 关于这个主题的许多其他类似问题可能会有所帮助
问题依然存在，没有键盘：prnt.sc/wd86xc，有键盘：prnt.sc/wd8778
您需要发布您所做的代码更改