移动端网站需要注意的细节
一、移动端的需要注意的事项
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;
}