随着微信用户数量超过 10 亿,作为 web 开发者,微信很多时候已经成为了我们 web 页面的载体,我们制作的页面几乎都会在微信上面展示和传播。于是,在开发过程中,如何去兼容微信,就成为了一个 web 开发者必须面对的问题。
微信内部的浏览器是 QQ 浏览器,微信中的 QQ 浏览器跟我们 PC 上的浏览器有很大区别。特别是当我们做 web 开发的时候,会很明显地感觉到,PC 中调试好的页面,在微信中展示出来的却不是我们想要的样子。
本场 Chat 我们先从页面布局开始说起,看看微信中那些虐过我们无数回的样式,该如何去处理:
- 移动端自适应解决方案该如何选择
- 如何根据不同的设计布局,来制定布局方案
- 常用的布局方案,在不同型号手机和系统中的兼容性问题
- 微信桌面客户端
- 微信中页面布局调试小技巧
文章开始,先带大家去简单了解一下那个让我们又爱又恨的:微信的浏览器。微信浏览器使用了腾讯的X5内核,是腾讯基于优秀开源Webkit做了优化之后开发的,这个浏览器是专门用在手机应用上面,目前已经向APP开发者共享腾讯X5浏览服务。在其强大的功能中,有几点跟前端开发者息息相关的特性:
- 支持 css Animation、css Transition和css Transform:支持css3主要动画属性
- 支持 JS RequestAnimationFrame:支持js动画,能够使用动画库
- 支持音频/视频:能够播放音频视频,并且能够控制其属性
- 支持 Canvas 和 Webgl:能够制作复杂的动画和小游戏
- 支持 Touch 事件:能够进行交互
这些特性跟PC的浏览器没多大区别,并且功能还挺强大的。但是在我们开发过程中就会发现,没那么简单;单单是页面布局,就有很大的学问。
移动端自适应解决方案该如何选择
在开始做移动端项目之前,需要先解决一个问题:移动端适配。现在的智能手机五花八门,手机尺寸也是多得让人发紫,作为前端工程师,如何让页面在不同手机上面都能够正常地显示,是一件非常重要的事情。要做到这一点,就需要做移动端的兼容适配,那么该如何去选择移动端兼容方案呢,下面介绍几种常见的方法:
注意:一定要在项目开始前,就确定好到底要用哪一种方案,因为这决定了你在写 css 时候所用的单位以及计算的方法。
这里就不介绍这些方案的原理了,主要来讲一下这些方案的使用方法以及利弊,有兴趣的同学,可以去搜索一下“移动端兼容方案原理”。
- 百分比布局
使用方法:通过 css 设置,高度固定,宽度设置百分比。
优势:
- 显示内容多
- 手机端页面能够在 PC 上展示
- 没有浏览器兼容性问题
劣势:
- 屏