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

2018-07-13 11:41:45 +08:00
 ghostgril

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

请问这种是怎么造成的呢

3069 次点击
所在节点    前端开发
11 条回复
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
也不说什么浏览器……
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
因为弹出键盘时，浏览器窗口的高度变了。可以在 resize 事件里固定一下高度
34C
2018-07-13 14:33:03 +08:00
@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 附上新的高度。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://tanronggui.xyz/t/470517

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX