mobile web曾经的踩过坑
兼容性一直是前端工程师心中永远的痛.手机浏览器,因为基本是webkit(blink)内核当道,很多公司,不用考虑IE系的浏览器,所以感觉兼容性上的问题可能会少一些. 但是手机端,虽然出了很多工具,但是调试依然比PC端麻烦很多.而且很多坑是因为手机浏览器本身的bug,一旦出现,相应的解决方案很难根据以前的经验进行推测.只能寄希望于谷歌 + 猜. 这里记录一下我做手机端浏览器 曾经 踩过的坑.之所以用”曾经”,随着版本的更新,有些问题没了. 另外我(我司)没有足够的人力和物力对很多手机浏览器进行测试,我也只需要兼容iPhone 4s(老大有一个4s的玩物,不然可以从5开始!-!)以上系列和很新的安卓手机.这点和大公司没法比,群里有个百度的朋友,低版本的安卓和 windows phone都要兼容…所以这篇文章当抛砖引玉了 (1)position:fixed position:fixed 应该是反映最多的问题.但是手机屏幕很小,对于一些要重点突出的地方,还特别需要fixed在视口的某个位置, 我遇到的问题包括: 呼出系统输入法后,fixed元素位置乱飘. fixed的元素是后弹出的,点击发生 击穿 现象(会触发弹层下面元素的click) 涉及整页动画时,元素位置乱飘 如果祖先元素使用了 transform 相关的样式,fixed元素的不按照视口来定位. 解决的思路 用代码,触发一下滚动