整理几个移动端的兼容性问题

还是前几天谈的移动端问题,这次说一下项目中遇到的几个移动端兼容性问题

一. 华为荣耀3C的原生浏览器问题:

同一行内,存在靠左与靠右的元素时,都必须加上浮动,否则,右浮元素不右浮,影响后续排版。

<div class="forcast-title">
    <span class="fl">上一交易日预报结果</span>
    <span class="fr gray">2016-03-04</span>
</div>
<div class="forcast-cnt ofh gray cb"></div>

两个行内元素span元素都要浮动才行。

二. ios safari时间显示问题。

之前设置new Date日期格式的时候,在ios中的safari中发现显示效果与其他浏览器不一致,找了多方面原因,结果是把“-”换成“/”就可以解决了。new Date("year-month-day");只识别new Date("year/month/day");

三. 关于长按识别二维码问题。

安卓设备微信中识别没问题,结果到了ios中识别不了。最终发现是将position设置为fixed,ios的微信中长按会不起作用。要想在ios的微信中实现长按识别二维码,只需确保二维码图片和包住图片的div都没有设置position:fiexd即可。

四. 移动端最小识别rem问题。

移动端相对来说兼容性不是什么问题,但是实际项目中发现,如果采用rem: .01rem;有些机型如:魅蓝note、iphone5等机型的webview中显示不出来。华为荣耀有的设置border的时候,有时0.03rem可以,有时不可以,暂时不明所以。所以还是建议,像border这种属性,移动端可以设置为1px。

五. 点击跳转到新页面会有类似点击穿透效果。

部分机型(三星note2、htc one …)在app的webview中出现了点击链接跳转到下一页面后,如果要跳转页面在当前页面的按钮位置有a链接的话,会出现,点击当前页面链接,直接也点击了下一页吗的链接。
可能描述的不是很清楚,更形象点说。A页面有个链接a,B页面也有个链接b,并且b的x、y属性含于a的x、y属性。那么会出现点击a链接,直接也点击了b链接。
解决办法,直接在另一个页面写了个maskView遮罩层,setTimeout100毫秒解决的。可能有点low,但是当时上线较急,就想到了这个办法。

六. 让hybird app中的webview页面看起来更像native。

web相较于native有一个好处就是版本更新比较方便,不会出现native应用商店审核乱七八糟的时间,直接点击app的某个按钮,使用webview打开页面,该页面随意替换都非常方便。最常用的就是活动页面,定期的活动只需要前端开发人员维护即可。但是假如用户长按屏幕的时候出现选中文本的场景,看起来不那么想native,如果有解决这个问题的需求,可使用:

Element {
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

其中Element为任意元素,或者直接将其写入cssReset文件中。

七. 移动端300ms延迟。

300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。
推荐两个js,一个是fastclick,一个是tap.js
关于300ms延迟,具体请看

八. 移动端 HTML5 audio autoplay 失效问题

这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。
解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。
解决代码:

document.addEventListener('touchstart', function () {
    document.getElementsByTagName('audio')[0].play();
    document.getElementsByTagName('audio')[0].pause();
});
九. 根据屏幕大小加载不同js

之前话k线用到highcharts的时候,在iphone5上发现显示不是很理想,用过highchars的api设置也没有解决一次设定适应多个屏幕。于是只能用过这种方式来进行多屏幕的适配。

<script>
    var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var script = document.createElement("script");
    if(browserWidth <= 380) {
        script.src = "js/common_small.js"
    }else{
        script.src = "js/common.js"
    }
    document.head.appendChild(script);
</script>

十. 屏幕旋转的事件和样式

事件名:window.orientation,取值:正负90表示横屏模式,0和180表示竖屏模式。

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}  

有些地方发现屏幕旋转之后,样式适配不完美,所以根据上面的orientation事件,增加了监测到设备屏幕旋转自动刷新的功能:

function hengshuping(){
    window.location.reload();
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
十一. background-size问题:

华为p8,魅族自带浏览器background-size显示有问题。

十二. flex布局问题:

iphone5s、魅族魅蓝note不支持(具体是自带浏览器还是什么浏览器忘了,有需要的可以自己尝试一下)

十三. input输入框的问题

最开始在input输入框中,也会习惯性的写上lineheight(其实可以不写),当使用placeholder的时候自己测试也没有问题。但当测试用魅族mx4自带浏览器测试的时候发现,在input输入框中,输入光标不会上下居中。当时也感觉很奇怪,然而将lineheight删掉就可以了,input中的所有元素就是默认居中的。

发表评论

邮箱地址不会被公开。 必填项已用*标注