上午
1.开始“我的积分”页面的实现,由于与原页面只更换了头部,考虑先把原页面的逻辑理清楚。
2.window.changeHref()
方法和window.hrefParam
属性是在index.ejs
里定义的,是处理与客户端交互时使用的。
3."我的积分"页面将原先页面复用过来,并且删除了未用到的代码,如下图待修改样式和调整结构:
下午
开始研究flex布局在安卓上的兼容性问题:
4.flex布局兼容性写法。
此文中使用的兼容性前缀,正好我们项目中用到的autoprefixer会自动在css样式中添加,据文章称支持安卓2.3以上,待验证正确性。
5.在前端兼容性查询网站caniuse上找到一张关于flex布局兼容性的图,
由上图所见,真的不管怎么设置前缀,安卓4.4以下确实会直接挂,不过这都8102年了,4.3是13年的技术,真的有安卓机还在用4.3吗?
吐槽归吐槽,问题还是要继续解决。
6.考虑使用手机来进行兼容性调整,电脑开启无线热点,手机连上,再访问电脑的本地服务器,即可看到项目的界面。192.168.137.1
为我本机的IP地址。
7.我们项目里gulp-autoprefixer的配置如下代码:
.pipe(autoprefixer({
browsers: ['Android >= 4.0','iOS 7']
}))
我看了一下,已经支持display:-webkit-box的写法了,也就是说是支持从2.3开始的安卓版本了。问题基本解决。
8.页面中出现了图片被挤到压缩的情况,实质上本不应该这样,应当是滚动条。调了很久,设置了flex:0;取消缩放后解决问题。
9.css兼容问题css移动端的兼容性问题 (适配问题)