1.input不能与position:fixed;的元素不能共存,在页面滚动且input是focus状态时,fixed的元素会跟着页面同时滚动;
2.ios中的input不能设置user-select:none;否则会input变成不可输入状态;
3.ios中的li,div,span等等元素(具体没有试验,貌似除了a标签以外),绑定的click点击事件是无效,当CSS中加了cursor:pointer;后,所绑定的事件才有效;同时出现了点击后又背景色高亮的效果;(处理方法有使用手机touchend等事件,或者用zepto.js里面绑定的tap事件)
4.body {-webkit-overflow-scrolling: touch;overflow-scrolling: touch;} /*解决上下拉动滚动条时卡顿、慢*/ios中是个bug,当body实际高度不足时,会遮盖底部fixed的元素*/
5. $('document').on("touchend","div",function(){}) ios上,点击有效,但如果是弹窗的话,会点击穿透后面的元素(a标签即跳转);
$('document').on("click","div",function(){}) ios上,点击无效;
$('div').on("click", function(){}) ios上,点击有效,且不会穿透;(暂未研究是不是其他js,fastclick.js的影响)
6. 跑马灯标签(marquee标签在iphone手机上样式会渣掉)
<marquee> <a>文字内容</a> <a>文字内容</a> <a>文字内容</a> </marquee>
无任何样式时,安卓手机上是正常的,在苹果手机上会渣掉;
解决方法(参考chrone中:host中定义的样式):
marquee { display: inline-block; overflow: hidden; text-align: initial; white-space: nowrap; }
7.postion:fixed定义的底部按钮,会出现在个别iphone中渲染时,消失不见的情况:
猜测原因,body中内容的高度不足一屏的原因,解决方法:
html{ height: 100%;} body{ min-height:100%}
8.iphone手机的input是readonly时,还是光标还是会进入。改为disabled后会出现颜色有透明度的情况
input:disabled{ -webkit-text-fill-color: rgba(255, 255, 255, 1); -webkit-opacity: 1; }
9.iphone6plus对flex的布局部分属性必须使用-webkit-前缀,不然样式会渣掉,目前有:
{ flex-wrap: wrap; -webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; }
10. tp中foreach 与 volist便签的区别:
<后续补充应对的详细方法>