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(链接要翻墙)

解决方法就是在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;