移动前端开发遇到的一些问题及解决方案

1.移动端左右滑动右侧有留白

出现这种问题的话查看一下自己的css中有没有用到position:relative或者position:absolute,我做页面的时候经常遇到这个问题，百分之一百是这个原因。

只要设置html，body的width为100%，overflow：hidden就可以了。

2.ios点击事件无效果的几个方案

1）为css添加cursor：pointer;

2）动态添加的元素要使用on绑定事件。

3）查询是否引用了js文件

3.设置animation动画安卓没有效果

为keyframes、animation、transform添加-webkit-前缀，缺一不可

4.设置了div高度为百分比不起作用

检查htnl,body{height:100%}

5.ios使用on绑定click事件出现绑定父标签闪烁的问题

给该元素一个样式如下：-webkit-tap-highlight-color: rgba(0,0,0,0);

6.解决前端移动设备不兼容问题

使用@media设置设备尺寸，分尺寸设置css，格式如下：

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation : Portrait ) { }

7.iphone移动端click事件延迟300ms解决方案

1）禁止缩放：<meta name="viewport" content="width=device-width, user-scalable=no">  

2）引用FastClick.js文件，window.addEventListener( "load", function() { FastClick.attach( document.body );}, false );  

8.防止点透事件

为上层元素的点击事件添加 return false;