开发中当移动端页面遇到IOS时出现的一些不大不小的坑

        细数入行开发以来,遇到的大大小小的坑,有的填上了,有的找不到了,还有的依旧静静地躺在那里,你去填也好,不去填也好,她就静静的待在哪里,动也不动。。。

        一直以来不喜欢总结,所以总是慢半拍,最近终于狠下心总结一下,开发以来解决的那些大大小小的坑,可惜,当你爱我时,你在身边,当我回首时,你已远走,寂静,悄然。。。

 一、margin属性在IE8情况下的双边距问题,相信大多数同学对这一问题都比较熟悉,而且解决方法    也是多如牛毛,不过现在要说的不是IE8,而是微信在IOS10.2系统的WKwebview内核的页面,更新之后的微信内核同样会出现双边距,解决方法也很简单,换成padding撑开距离就好。

二、IOS手机运行微信页面,调用MUI的picker会同时调用到IOS的输入软键盘,解决方法则是在调用picker之前禁用ios软键盘,

1.解决办法为:为input添加一个readonly="readonly"属性;

         

2.相关知识点:禁用输入法或中文输入

        type="text" value="" style="ime-mode:disabled" onkeypress="noPermitInput(event)">

关于样式 ime-mode,网上查找如下:

ime-modeCSS提议属性

语法:

ime-mode : auto | active | inactive | disabled

参数:

auto: 不影响IME的状态。与不指定ime-mode属性时相同

active: 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME

inactive: 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME

disabled: 完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME

说明:

设置或检索是否允许用户激活输入中文,韩文,日文等的输入法(IME)状态。

对应的脚本特性为imeMode。

示例:


三、ios系统进入页面,软键盘唤起后,页面的 fixed 元素失效(即无法浮动,也可以理解为变成了 absolute 定位)

解决方法:

display: box;

display: -webkit-box;

display: -moz-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: space-between;

-webkit-justify-content: space-between;

-moz-justify-content: space-between;

-ms-justify-content: space-between;

-o-justify-content: space-between;

justify-content: space-between;

全部添加进外层父元素的样式里会产生一种叫做‘神奇’的效果。

你可能感兴趣的:(开发中当移动端页面遇到IOS时出现的一些不大不小的坑)