【问题标题】: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
    • 您需要发布您所做的代码更改
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-07-15
    • 2012-04-20
    • 1970-01-01
    • 1970-01-01
    • 2015-06-18
    • 2017-02-25
    • 1970-01-01
    相关资源
    最近更新 更多