昨天,在医院现场的客服人员,向我们反馈一个问题:说一位用户用他的安卓手机打开我们的app之后,界面是乱掉的;如下图:

向客服询问了具体的设备信息:安卓系统版本号是4.2

下意识觉得是因为css的兼容问题,因为之前遇到过太多类似问题了。

因为现在css3大行其道,像 flex,transform,transition,animation等属性都有广泛的应用,当然这些css3也支持当下的主流设备及系统。

但是因为我们的app目标用户比较广泛,很多用户是老年用户,使用比较低版本的系统,这些属性就可能在兼容问题。

我看了一下这个页面的css源码,发现弹框的样式如下:

.modal {
display: none;
max-height: 80%;
overflow: hidden;
position: fixed;
width: 86%;
top: 50%;
left: 7%;
background-color: #fff;
padding: 0;
z-index: 12;
zoom: 1;
overflow: hidden;
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-transform: translate3d(0, -52%, 0);
transform: translate3d(0, -52%, 0);
}

在 http://caniuse.com/ 查了一下transform的兼容性:

结果如下:http://caniuse.com/#search=transform

根据查询结果,我们发现:transform不兼容安卓4.3以下版本

所以,上述BUG产生的原因很可能是因为用了:transform: translate3d(0, -52%, 0) 来实现上下居中导致的。

解决:

优雅降级:在不影响当前代码功能的前提下,用js判定安卓4.3以下版本的运行环境,因为弹框高度不固定,动态获取弹框高度,重置transform属性值,然后利用margin负值居中。

    var userAgent = navigator.userAgent;
var index = userAgent.indexOf("Android")
if (index >= 0) {
var androidVersion = parseFloat(userAgent.slice(index + 8));
if (androidVersion < 4.3) {
var androidH = $('.modal').height();
$('.modal').css({ 'height': androidH, '-webkit-transform': 'translate3d(0,0,0)', 'transform': 'translate3d(0,0,0)', 'top': '50%', 'margin-top': -androidH / 2 });
}
}

  

解决效果:

总结思路:

当我们遇到低版本安卓上界面出现问题,主流设备和系统都正常时,我们可以这样解决:

1> 查看问题出css源码,重点查看css3的一些新属性;

2> 去 http://caniuse.com/ 查看这些新属性的兼容性;

3> 如果bug影响范围较小,可以使用优雅降级,对bug进行特殊处理;但是如果bug原因影响范围较大,建议使用兼容性较好的代码重构原来的代码。

当在安卓低版本呈现的界面(H5)出现问题的时候,我们怎么解决?的更多相关文章

  1. vue项目在安卓低版本机显示空白原因

    vue项目在安卓低版本机显示空白原因: 可能的原因一: 查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题. 这时候需要安装babel-pollyfill. 网 ...

  2. Android较低版本(<5.2) 页面默认Select选择框效果的BUG解决

    Bug描述: 使用低版本安卓(<5.2),在微信上打开网页,点击下拉框,会出现如下图所示的用来展示select选项的弹出框: 在选项较少的时候,可以向下滑动,将选项滑到底部 滑动前: 滑动后: ...

  3. 如何解决vux不兼容安卓低版本问题

    最近做移动端H5页面用VUX来写UI组件这块.ios测试的时候没啥大问题,不过在4.4版本的华为手机上测试就崩了.接下来详细记述下崩的几个点. 第一:vux自带的提示框,在低版本安卓系统上全不是居中显 ...

  4. axios 安卓低版本兼容性处理

    问题: 在较低版本的android手机中发现封装的 http 无效,我测试使用的是android 4.4的老手机,主要就是无法使用promise. 解决方案 安装 npm install es6-pr ...

  5. VS2015调用低版本lib库出现“无法解析的外部符号 __snprintf ”问题的解决

    VS2015在调用低版本lib库出现有时会出现“无法解析的外部符号 __snprintf ”的问题,解决方法是加入lib库“legacy_stdio_definitions.lib”到工程.

  6. nginx低版本不支持pathinfo模式,thinkphp针对此问题的解决办法

    将一个thinkphp项目从apache环境移到nginx1.2上,怎奈,nginx这个版本默认不支持pathinfo模式 首先,编辑nginx的虚拟主机配置文件 location ~ .*.(php ...

  7. 解决vue低版本安卓手机兼容性问题

    低版本的安卓手机可能会白屏,是由新特性不支持引起的 解决代码es6新特性兼容问题 1,npm 安装 npm install babel-polyfill npm install es6-promise ...

  8. js中如果遇到低版本安卓设备调用setTimeout不生效解决办法

    工作中会遇到低版本安卓设备调用setTimeout不生效,既不会报错,里面的函数也不会执行,这里po一个解决办法,如果不执行则执行安卓自己封装的原生的setTimeout方法:sdk.setTimeo ...

  9. 安卓 API 19 低版本设置自带的圆圈效果

    在 Android API 19 环境下,RadioButton 消除或者自定义自带的圆圈效果的形式来设置: 自定义自身选择图标 android:button="@drawable/sele ...

随机推荐

  1. visjs使用小记-1.创建一个简单的网络拓扑图

    1.插件官网:http://visjs.org/ 2.创建一个简单的网络拓扑图 <!doctype html> <html> <head> <title> ...

  2. centos7 安装docker-ce ,最新版本docker,docker阿里云加速

    直接用yum install docker -y安装的docker版本为1.12,但是docker发展很快,现在都17.06.2了.docker-ce是指docker的社区版 卸载老版本的 docke ...

  3. 【Todo】Linux进程调度算法学习

    参考这篇文章 http://blog.chinaunix.net/uid-27052262-id-3239260.html Linux支持三种进程调度策略,分别是SCHED_FIFO . SCHED_ ...

  4. Spark internal - 多样化的运行模式 (下)

    Spark的各种运行模式虽然启动方式,运行位置,调度手段有所不同,但它们所要完成的任务基本都是一致的,就是在合适的位置安全可靠的根据用户的配置和Job的需要管理和运行Task,这里粗略的列举一下在运行 ...

  5. selenium+jenkins网页自动化测试的构建

    jenkins+selenium可以做到对web自动化的持续集成. Jenkins的基本操作: 一.新建视图及job 新建视图: 新建job: 可以选择构建一个自由风格的软件项目或者复制已有的item ...

  6. Mask_RCNN测试自己的模型(练习)

    # coding: utf-8 # In[323]: import osimport sysimport randomimport mathimport numpy as npimport skima ...

  7. Docker CE部署

    一.概述 Docker 在1.13版本之后,从2017年的3月1日开始,版本命名规则变为如下: 项目 说明 版本格式 YY.MM Stable 每个季度发行 Edge版本 每个月发行 同时Docker ...

  8. C++ std::unordered_multimap

    std::unordered_multimap template < class Key, // unordered_multimap::key_type class T, // unorder ...

  9. Springboot-读取核心配置文件及自定义配置文件

    读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或application.yml配置文件,读取这两个配置文件的方法有两种,都比较简单. 核心 ...

  10. Openssl crl命令

    一.简介 crl命令用于处里PME或DER格式的CRL文件 二.语法 openssl crl [-inform PEM|DER] [-outform PEM|DER] [-text] [-in fil ...