移动端网站需要注意的细节

2015-12-06 散崖 1204人已阅读

一、移动端的需要注意的事项

       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设备,右是安卓):

002001

    这个时候我们往往想要通过设置: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;
}

 

 

 

交换友情链接