移动端背景图在键盘弹出后高度会压缩？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2359 天前的主题，其中的信息可能已经有所发展或是发生改变。

我设置页面背景图为 cover，我在输入框输入时图片高度就自动缩小到显示范围里，被键盘覆盖的地方就没有了背景，如果我滚动的话就会很难看

请问这种是怎么造成的呢

11 条回复 • 2018-07-13 18:29:59 +08:00

ghostgril

2018-07-13 13:30:04 +08:00

就是移动端输入的话，会弹出系统键盘，这时候背景图片就只有显示区域大小，如果滚动页面会发现图片变短了

jjplay

2018-07-13 13:37:14 +08:00

你要不先看会直播休息一下...

34C

2018-07-13 14:23:19 +08:00 via iPhone

也不说什么浏览器……

ghostgril

2018-07-13 14:25:14 +08:00

@34C 这种不是浏览器的差别吧，开发都是谷歌啦

yamedie

2018-07-13 14:29:55 +08:00

软键盘弹起, 视口高度变小, 背景图又是按百分比填充的(cover 也是按照百分比吧), 所以就压扁了.
不用百分比就好了, 用 rem 试试

koor

2018-07-13 14:32:14 +08:00 via Android

因为弹出键盘时，浏览器窗口的高度变了。可以在 resize 事件里固定一下高度

34C

2018-07-13 14:33:03 +08:00 via iPhone

@ghostgril 你去搜一下 iOS Safari 的 background bug 就知道为什么要问浏览器了，你又没说是安卓，也没发在安卓节点，咋知道你就是谷歌呢

codeEleven

2018-07-13 14:35:32 +08:00

@jjplay 就你皮

ghostgril

2018-07-13 14:51:08 +08:00

@34C 好吧

ghostgril

2018-07-13 17:25:05 +08:00

尝试了许多方法还是不行。。。明明设定开始渲染的时候获取浏览器的高度，再设定 background-size，但是软键盘一出现背景图又收缩了

meetguardian

2018-07-13 18:29:59 +08:00

监听软键盘抬起，然后重新计算高度给背景图 bgs 附上新的高度。