一、移动端的需要注意的事项
1.手机端要触发"data-"属相触发事件注意事项
在苹果手机,通过data-的方式来绑定事件,奇葩的事情来了:例如
<i class="gift_icon" data-roler='myprize'>单击弹出来</i> <script type="text/javascript"> $(document).on("click", '[data-roler="myprize"]', function() { alert("弹出来!") }); </script>
我们发现button和a元素完全支持的,可是遇到其他的元素比如i,div等,事件的绑定就会失效!!!解决的方式
.class{ cursor:pointer, }
2.iPhone 手机上对于电话号码的处理问题
在苹果手机,对于类似电话号码的数字会显示为拨号的超链接,而且会在停留一小段的时间后变成白色,简直是奇葩,处理的方式是让其不被显示为拨号链接:
<meta name="format-detection" content="telephone=no"/>
3.button按钮在安卓和苹果手机上的表现差异
在苹果和安卓的手机上,不同的设备,浏览器的对于button元素的按钮的渲染其实是不一样的,看下图(左ios设备,右是安卓):
这个时候我们往往想要通过设置:display: inline-block; padding: 15px 18px;来让按钮达到统一的宽高,但是这样子竟然有bug,点击查看demo(在苹果手机端打开),padding失效!!竟然失效,怎么处理?经测试发现:需要改按钮添加背景色或者边框就可以有效:
/** * btn1在ios中对于button元素是失效的 */ .btn1{ display: inline-block; padding: 15px 18px; } /** * btn2在ios中对于button元素是有效的 * background 和 border 只要设置其中一个就可以 * bootstrap 在设置按钮的时候也是有默认的btn-default */ .btn2{ padding: 15px 18px; display: inline-block; background:#f60; border:1px solid #000; }