不可否认,在个别老旧机型上,Flexbox 确实会遇到些问题(主要是旧版的问题),比如旧版 inline 元素需要设置 display:block 才能正常显示,不支持 flex-wrap 等,但这些问题都是可以解决的。我们不能因噎废食,因为这些小问题存在就完全故步自封,抛弃 Flexbox。关于 Flexbox 布局总结几点:
需要明确 Flexbox 规范有过多个版本,不同时期的浏览器可能实现了不同版本规范。
按照最新版规范(https://www.w3.org/TR/css-flexbox-1/)编码,通过工具针对我们设置的浏览器范围自动补全代码。
总结个别老旧机型的兼容问题,编码时注意绕过。
Flexbox 也不是万能的,有它适用的布局,也有不适用的,勿滥用。
开发阶段在真机上调试网页,我们通常需要配置手机的代理服务器为开发电脑的 fiddler 等抓包工具,然后即可调试开发电脑上的页面。https请求抓包相对麻烦,需要安装根证书,在手机浏览器里通过ip 端口访问电脑上的 fiddler,会提示下载证书,下载安装即可。可是在这个项目,我们遇到点麻烦,Android 手机正常调试没毛病,手头的 iPhone 的 https 请求却抓不到包,不管装不装证书都不行。后来又找了几台 iPhone,发现安装证书之后,有的可以访问,有的不可以,于是我们怀疑是iOS版本问题,遂查了一下 iOS 近期版本更新内容,发现果然是新发布的10.3版本有变化,需要在“设置”>“通用”>“关于本机”>“证书信任设置”中对已安装的证书进行信任设置,之后才能抓包 https!!这个问题耽误了不少时间,最后知道真相的我们眼泪掉下来~以后得多长个心,多关注主流手机系统、浏览器的更新内容。
对于手机端项目,最让人头疼的莫过于兼容问题了。项目完成后,被测试人员告知在华为个别机型自带的浏览器中,商品列表页面显示异常,商品一直处于加载状态,如下图所示:
我们尝试在这些手机的京东APP、UC等浏览器中访问,没有发现异常。于是判断是原生的浏览器的兼容问题,但是具体是哪里不兼容呢?我们首先猜测华为手机原生浏览器的内核版本过低,无法支持 Vue.js 2.0 框架。然而,在之前上线的一些项目就是使用 Vue.js 2.0 开发的,在这些手机原生浏览器下也能打开,因此排除了这个问题。最后发现原因是项目中使用了 ES6 的 API,而华为部分机型原生浏览器内核版本过低,不支持 ES6 的 API。其实对于 ES6 的兼容问题我们之前是有所注意的,在脚手架中使用了 Babel 来转化 ES6 代码。Babel 是一个广泛使用的转码器,几乎可以编译所有新潮的 JavaScript 语法,但对于 API 来说却并非如此。比方说,下列含有箭头函数的 ES6 代码:
经过 Babel 插件转化为: