谈到兼容性问题,对于兼容在工作中我总结了一些,现在做一下记录,以供以后学习。
兼容性的问题分为:1.多种浏览器兼容性问题(一般是PC端) 2.横竖屏兼容性问题(一般多以hybridAPP)
多种浏览器兼容性问题:
1) 不使用太过超前语法,例如:es6语法,例如:字符串模板,es5新增语法:map()
2) css样式编写,尽量不用css3写法,如果非要用则需要加内核兼容前缀,
例如:transition: width 2s;-moz-transition: width 2s; /* Firefox 4 */-webkit-transition: width 2s; /* Safari 和 Chrome */-o-transition: width 2s; /* Opera */
3) 针对弹性盒也是需要做兼容的,为避免这样的情况可以采用gulp或者一些其他打包工具编译
横竖屏兼容性问题:
对于,做hrbrid App的公司来讲,横竖屏兼容对于web前端是必遇到的问题。针对横竖屏兼容性问题,对于前端而言,采取的解决方案很多:
a. 利用媒体查询,判断宽度,针对现在主流手机的宽度都不会超过720px,所以通过宽度来判断,如果宽度超过720px,那么就可以认为是横屏状态了。
b. a的解决方案能够解决手机端的情况,但是比较粗糙,无法兼容ipad等平板的问题,有的平板宽度超过720px,a的方式已经默认为是横屏了,但是人家还是竖屏。那么采用
@media all and (orientation : landscape) { }
@media all and (orientation : portrait){
h2{color:green;}/*竖屏时字体绿色}
利用css判断竖竖的方法,同时再将媒体查询判断宽度的代码放到竖屏,将二者结合效果更好。
c. 最后一个解决方案就是,需要通过客户端了,利用客户端的方法,判断横竖屏,然后,再判断是取宽度还是高度值来计算rem布局的跟字体大小
其实,这三种方法并不冲突,反而是互相补足,所以三种结合起来用是最佳的方案