移动前端兼容操做总结

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

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

适配的目标

引用一文章的描述：

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

概念理解

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

HTTP: 匹配UserAgent字段

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

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

1. //检测是不是移动端

2.        function checkMobile() {

3.            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))) {

4.                alert("请在移动端查看（或者开发者模式）");

5.            }

6.        }

JS: 判断window和screen

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

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

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

我喜欢一种暴力的方式:

1.    ///嘿嘿嘿

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

CSS: @媒体查询

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

1. @CHARSET "UTF-8";

2. @media (max-width: 991px) {

3.    /*do something*/

4. }

5. @media (min-width: 1601px) {

6.    /*do something*/

7. }

HTML: 添加缩放标签

也是很是实用的,一般手机屏幕的ppi/dpi很是高,因此正常的字体会显得很小,因而最好在html头中添加如下viewport标签:

1. <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表明容许