移动端常见问题(兼容性)

@ 移动端相关问题

H5标签兼容性

• 可以使用Can I USe来查看相关兼容性,链接:标签属性的浏览器兼容查询

CSS兼容性问题

• 常用的方法就是咱们可以在写CSS属性的时候，加上一些浏览器内核的前缀
• 为了方便,咱们现在可以使用Modernizr-------一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性,能比较方便我们开发.链接:Modernizr
• 移动端点击存在300ms延迟的问题
  1.出现的原因:因为系统需要判断第一次点击后是否还存在第二次点击(这个时间就为300ms),如果用户还有第二次点击,则就是对页面进行放大或者缩小;如果没有第二次点击,那么就会把click事件传入给 页面.这就是为什么会存在300ms的延迟.
  2.怎么解决?
  这个解决方法并不唯一,而且每个框架所使用的方法也不一样,但是常用的JS解决方案，一般是使用
  fastclick去解决
  解决原理:使用fastclick,实际上是会去通过DOM自定义事件去模拟一个click事件,然后把真正的300ms之后的事件给阻止掉.
  方法:下载相应包,直接进行JS导入,具体的可以查看GitHub地址:fastclick
• 单行文本溢出(flex布局下失效)

{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

• 多行文本溢出(只在webkit内核的浏览器下有效)

{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
webkit-box-orient: vertical;
white-space: normal !important;
word-wrap: break-word;
}

关于window.requestAnimationFrame的兼容

• 描述:执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行.链接:requestAnimationFrame
• 其兼容写法

var requestAnimationFrame = 
window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.oRequestAnimationFrame || 
window.msRequestAnimationFrame;