mobile web曾经的踩过坑
兼容性一直是前端工程师心中永远的痛.手机浏览器,因为基本是webkit(blink)内核当道,很多公司,不用考虑IE系的浏览器,所以感觉兼容性上的问题可能会少一些.
但是手机端,虽然出了很多工具,但是调试依然比PC端麻烦很多.而且很多坑是因为手机浏览器本身的bug,一旦出现,相应的解决方案很难根据以前的经验进行推测.只能寄希望于谷歌 + 猜.
这里记录一下我做手机端浏览器曾经踩过的坑.之所以用”曾经”,随着版本的更新,有些问题没了.
另外我(我司)没有足够的人力和物力对很多手机浏览器进行测试,我也只需要兼容iPhone 4s(老大有一个4s的玩物,不然可以从5开始!-!)以上系列和很新的安卓手机.这点和大公司没法比,群里有个百度的朋友,低版本的安卓和 windows phone都要兼容…所以这篇文章当抛砖引玉了
(1)position:fixed
position:fixed
应该是反映最多的问题.但是手机屏幕很小,对于一些要重点突出的地方,还特别需要fixed在视口的某个位置,
我遇到的问题包括:
- 呼出系统输入法后,fixed元素位置乱飘.
- fixed的元素是后弹出的,点击发生击穿现象(会触发弹层下面元素的click)
- 涉及整页动画时,元素位置乱飘
- 如果祖先元素使用了
transform相关的样式,fixed元素的不按照视口来定位.
解决的思路
- 用代码,触发一下滚动(document.body.scrollTop = xx),我用这个方法解决了iPhone某版本上,弹层击穿现象.如果测试的时候,出现fixed相关问题,都可以先试着
手动滚动一下屏幕,看能否修复. - 用absolute元素替换.基本能解决问题,但是要多些一些代码,而且有明显的卡顿感.
- 改设计,比如
不用fixed(一般很难做到),简化一些动画
现在的情况
现在的情况是,新版的手机浏览器处理fixed元素的健壮性越来越好.呼出输入法虽然还有些bug,但是比以前出现的问题要好很多,一般可以接受.除了第四条,其他问题基本都还ok.
关于第四条,把fixed元素移出去就好.如果你再body上应用transform,那么请容许我给你点根蜡烛.stackoverflow上有个相关的问题,大家可以看一下.
补充说明
有一个全屏遮罩的fixed写法,一直再用
.full-cover{
position:fixed;
top:0;left:0;right:0;bottom:0;
}
这个用过bootstrap的有心人应该都知道.但是还是遇到不少不知道的同学,在这啰嗦一下.
(2) 链接的打电话和发短信功能
通过设置a标签的href 为tel:电话号码和sms:电话号码,可以直接使用手机的打电话和发短信功能.但是这里有两个小坑.
1.安卓某些版本的webview上,tel:会报找不到页面
- 解决方案传送门
2.发短信时,如果有预加内容,安卓和iPhone的schema时不同的,需要区别对待,主要?和;
安卓: <a href="sms:123456789?body=sometext">点击发短信</a>
//ios7下sms的body处好像有问题,无法预制发送内容.
ios:<a href="sms:123456789;body=sometext">点击发短信</a>
注:短信功能,我并没有用在实际项目上,只是查找打电话功能的时候,碰巧搜到相关内容,然后简单的试了一下,内容主要来自stackoverflow.有不对之处,请指正
(3)touch
touch事件,之前我是自己管理的,因为一般的页面,需要去管理触摸得地方很少.不过总归要尝试一下别人的先进有法(直接使用别用的库)
1.首先一个巨无霸hammer.js.这个我没用过,因为实在太屌,各种手势.看它的github的star数,好像也比较靠谱.不过我只是简单的考察了一下,没实际用过,就不多说了.
我考察的比较多得是,zepto和appframework的触摸插件,两者都添加的tap系列和swipe系列事件,代码实现也很相似zepto touch.js,af.toucheEvent.js
项目使用的时候,我被af的注释所迷惑
//Touch events are based from zepto/touch.js
//Many modifications and enhancements made
然后就用了appframework的touch插件.但是事实表明,zepto的touch.js要靠谱一些.
这里列举几个可能会出现问题的地方,算是af.touchEvent.js的采坑记录,如果以后出现类似的情况,大家可以参考一下解决方案.
1.安卓下swipe*的方法很难触发
这是安卓的一个老问题了.谷歌一下 类似zepto android swipe的关键字,就能发现不少.很多项目中的issue都能找到这个问题,连安卓自身项目里都有相关issue(链接要FQ)
解决方法就是在touchstart或touchmove事件中,主动调用e.preventDefault()
如果使用zepto的库,有两种方案,
//1.在监听函数中调用e.preventDefault()
$('#ele_id').on('swipeLeft',function(e){
e.preventDefault();
//....
})
//2.修改库的源代码,再bind touchmove事件时,添加
.on('touchmove MSPointerMove pointermove', function(e){
if((_isPointerType = isPointerEventType(e, 'move')) &&
!isPrimaryTouch(e)) return
firstTouch = _isPointerType ? e : e.touches[0]
cancelLongTap()
touch.x2 = firstTouch.pageX
touch.y2 = firstTouch.pageY
deltaX += Math.abs(touch.x1 - touch.x2)
deltaY += Math.abs(touch.y1 - touch.y2)
//只有下面两行是要修改的代码,上面的代码帮大家定位
//这里当时安卓系统,且是明显的横向滑动时,调用preventDefault
if(isAndroid && deltaX > 10 && deltaX>deltaY){
e.preventDefault()
}
})
(注:`isAndroid`变量是用来表征是不是安卓手机
var isAndroid = false;
if (navigator.userAgent.match(/Android/i)){
isAndroid =true;
}
)//end of 注
对于安卓的swipeUp和swipeDown,就不建议去做任何干涉,因为会影响浏览器本身的滚动
2.以上下滑动为主的操作,有可能触发swipeLeft/Right事件,而不是swipeUp/Down事件.这个主要是因为native scroll的一些特性,导致算距离时竖向的距离可能会很小,而上下滑的最后,一般会有一个横向滑动的连带动作,导致deltaX>deltaY, 从而判断出错.
zepto中,delta在touchmove中是累加的,所以基本没啥问题.
deltaX += Math.abs(touch.x1 - touch.x2)
af.touchEvents.js中,问题很严重.我是把取坐标时的pageX/pageY改成了clientX/clientY来解决这个问题的.供大家参考
补充说明
最后说一下,还是慎用左右滑动的设计,一是兼容性问题.二是,微信等app是手机网页主要的入口,而从左向右的滑动,很容易关闭页面.
(5)audio
看国外的资料,因为MP3的版权问题,会让大家准备ogg等格式的文件.在天朝,版权问题吗(省略几个字)…所以直接上MP3.
<audio>
<source id="mp3source" src="yours.mp3" type="audio/mpeg">
</audio>
虽然很多资料上说,MP3格式的兼容性最好.但是这里还是有坑.当时运营同学给我一段音频,mp3格式,发现iPhone下放不了.查了很多资料,最后在一个论坛里找到,ios下MP3要满足一定条件
Try changing the MP3 to 44100Hz, 128kbs
其他参数的我没试过,但是按上面要求转换出得MP3,都可以在iPhone上使用.
(6)localStorage/sessionStorage
PC端,这两个API在低版本的IE下是没有,所以是需要用try..catch包裹的.
在移动端,我刚刚开始是不加的,所测试的手机也没问题.但是现在很多浏览器有无痕模式,这个模式下,localStorage相关的API时禁用的.所以使用时,还是要保证代码的健壮性
(7)小贴士:
最后说些细节吧,后面可能会进行补充.也希望大家多提供素材
-
注意input的type: 比如希望输入手机号的input,应该用
type=tel(希望输入纯数字的,个人觉得type=tel也是最好的选择) -
监听input 的
oninput事件来代替onchange,这两个事件的含义,查一下就知道,不啰嗦了 -
transform的时候,加上类似
translateZ(0px),有助于开启硬件加速.也看到有人说,现在不加z轴,也会开启硬件加速,这个我还没找到确切依据,不过加上不麻烦,我一般都是加上的. -
如果input或button的有怪异的默认样式,尝试
appearance:none;(-webkit-appearance:none;) -
做透明的样式,
background:RGBA(x,x,x,x)和ps对应的更好,opacity我主要用于动画效果
补充： 1. 在用 overflow-y: auto 来实现滚动的时候，ios 下会出现滚动卡顿的情况，android 一切正常。 解决办法： -webkit-overflow-scrolling: touch
- ios 下使用 overflow: hidden 会失效，解决办法：添加 position: relative
input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal，（stackoverflow也可查到这种解决办法）。
Android原生浏览器会点击链接会出现高亮背景的情况，去除：-webkit-tap-highlight-color:rgba(0,0,0);
在Android的高级版本中可能还会出现黄色边框，去除：outline:none;
