移动端常见兼容性问题

1、设置文字行高为字体行高，解决文字上下边留白问题。
2.给动态元素添加事件，需要使用事件委托（绑定到document），解绑也需要用委托的方式。苹果机点击事件不能触发。需要用touch系列事件。
3.Img标签src属性无值（php渲染过的），在苹果机上显示无图片，在安卓机上显示图片裂开，可加alt属性及值。
4.同一个标签多次绑定同一个事件（页面复杂情况容易出现这种情况，尽量避免这种情况），可以减少bug的出现，利于维护页面;
5.在rem自适应页面使用精灵图。会容易出现图片缺角的问题（约1-2像素）。解决办法：使装精灵图的盒子变大，让图片居中显示。
6.给选中的盒子增加一个标识，可以使用伪元素，减少标签的使用。
7.有横向滚动条的内容被垂直触摸，在ios机上无法滚动页面。可使用：html,body{position:relative;-webkit-8.overflow-scrolling:touch;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-9.select:none;-wekit-user-select:none}。
10.当祖父元素用overflow属性时，父元素采用transform属性会影响子元素定位position:absolute；导致子元素超出隐藏；建议用其他属性替换transform属性。
11.click事件在IOS系统上有时失效，给绑定click事件的元素加上cursor：pointer解决。
12.placeholder垂直居中问题：在IOS和Android中显示不同。解决方法是：在保证input输入文本垂直居中的条件下，给placehoder设置padding-top。

13.ios若页面走缓存，可以用此方法清除。window.onpageshow = function(event) if (event.persisted) {window.location.reload()}