移动前端兼容操作总结

移动端Web页面，即常说的H5页面、手机页面、webview页面等。

手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，这里总结的是针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。

适配的目标

引用一文章的描述：

在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩放（看起来差不多）”。

概念理解

在做适配之前，需要先理解一些概念。对于不理解的地方，可以搜索更多文章看看，本文总结的移动端兼容性问题解决方案囊括了4个思考方向, 注意不是唯一的具体的解决方案而是从四个角度来思考问题, 分别是html, css, 脚本以及http协议(服务端)的视角来考虑兼容问题, 仅供参考~

HTTP: 匹配UserAgent字段

User Agent中文名为用户代理，简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。

最主流的方法就是在服务端/客户端查询这个字段:

//检测是否是移动端        function checkMobile() {            if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {                alert("请在移动端查看（或者开发者模式）");            }        }

JS: 判断window和screen

屏幕可用工作区高度/宽：window.screen.availHeight/window.screen.availWidth

屏幕分辨率的高/宽：+window.screen.height/window.screen.width

网页可见区域宽/高：+document.body.clientWidth/document.body.clientHeight

我喜欢一种暴力的方式:

    ///嘿嘿嘿    let device = window.innerWidth < window.innerHeight ? "phone" : "laptop";

CSS: @媒体查询

通过查询屏幕宽度判断手机,只局限于css样式; 特点是,媒体查询动态更新,非常方便,而且不仅适应屏幕大小,还动态兼容窗口尺寸的改变:

@CHARSET "UTF-8";@media (max-width: 991px) {    /*do something*/}@media (min-width: 1601px) {    /*do something*/}

HTML: 添加缩放标签

也是非常实用的,通常手机屏幕的ppi/dpi非常高,所以正常的字体会显得很小,于是最好在html头中添加以下viewport标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

width 设置layout viewport 的宽度，为一个正整数，或字符串”width-device” initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数 maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数 height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许