iOS平台WebView中元素fixed失效的问题


1、移动端并不会都使用原生开发,有时候会简单粗暴地在AndroidiOS中提供一个activityviewController,然后在里面显示一个满屏的WebView,在WebView里加载某一个网页的内容即可,这个要加载的网页就可以交给其他人去开发了。


2、一般而言,如果网页布局简单,没有使用浮动定位等属性的话,基本不会出问题。但好死不死,很多时候用个position:fixed之类的把输入框固定在底部是十分常见的。但就是这个属性导致兼容出了问题。


3、既然说是兼容出了问题,那也就是说有的正常。而不正常的就出在iOS平台中。原因简单一句话就是iOS在获取到你准备输入的时候会让相关的fixed失效,这样iOS就可以把输入框按照它的计算上下移动正好放在软键盘上面。


4、如果故事仅仅到了这里,那么出现的问题最多就是软键盘弹起,滚动页面时输入框相关的fixed失效导致也随页面一起滚动了。但好死不死,假如你在iOS的微信端打开网页的话,会惊奇的发现,有时候软键盘收起的时候,输入框透明了,是的,透明了,而不是消失了,也就是说,你如果在相应的底部位置点击的话,它还会获取焦点弹出键盘甚至又不透明了。


5、这暂时原理还不清楚,但应该和上面iOS对浏览器的处理是有关系的。


6、可能的做法就是,尽量使用absolute代替fixed,并且在弹起键盘的时候不让用户滚动页面,言外之意就是在相关的元素身上增加名字叫touchmoveaddEventListener()事件,监听到了滚动就收起键盘,变成满屏滚动页面。这也是一种妥协吧,因为如果用户说我就要弹出键盘的时候滚动上面区域啊,那,容我再想想。




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值