移动端适配(基础概念+分析flexible源码)

移动互联网发展的如火如荼，这对前端工程师要求就更高了，移动端适配也就成为了重要的问题之一。先说一下涉及到的基本的概念：

1.devicePixelRatio（设备像素比通过window.devicePixelRatio获取，可以=物理像素 / 独立像素=设备像素/CSS像素；可以说物理像素=设备像素；CSS像素是独立像素；
2.屏幕密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算
3.Retina屏幕：根据苹果发布产品的定义：PPI高于210（笔记本电脑）、260（平板电脑）、300（手机）的屏幕都称为Retina屏幕
4.px 适用于pc端，1px等于1个逻辑像素
5.em是相对于父元素下的font-size而言的，大面积使用em会比较混乱
6.rem根据html下的font-size的大小来定1rem的大小，是个相对单位，比如font-size：100px；那吗1rem=100px
7.initial-scale，初始的缩放比例
8.minimum-scale，允许用户缩放到的最小比例；
9.maximum-scale，允许用户缩放到的最大比例；
10.user-scalable，用户是否可以手动缩放；

ios的一些必备

1.启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏:<meta name="apple-mobile-web-app-capable" content="yes"/>
2.如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示:<meta content="yes" name="apple-touch-fullscreen" />
3.iphone,itouch图标，默认 57x57 像素，ipad是72*72；ipad3对应144×144的高分辨率；必须有<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
4.Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
5.ios启动画面<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
6

image.png

7. viewport-fit；iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值
   contain: 可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口
auto：默认值，跟 contain 表现一致
   iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量
   safe-area-inset-top 安全区域距离上边边界距离
safe-area-inset-right 安全区域距离右边边界距离
safe-area-inset-bottom 安全区域距离底边边界距离
safe-area-inset-left 安全区域距离左边边界距离

meta常用标签

1.搜索引擎抓取<meta name="robots" content="index,follow"/>
2.为移动设备添加viewport<meta name="viewport" content="..........">
3.主屏标题,ios6新增加<meta name="apple-mobile-web-app-title" content="标题">
4.是否使用webapp模式，删除苹果的菜单栏和工具栏<meta name="apple-mobile-web-app-capable" content="yes"/>
5.设置苹果工具栏颜色<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
6.不让页面中的数字识别为电话或者email<meta name="format-detection" content="telphone=no, email=no"/>
7.qq强制竖屏<meta name="x5-orientation" content="portrait">
8.uc强制竖屏<meta name="screen-orientation" content="portrait">
9.uc强制全屏<meta name="screen-orientation" content="yes">
10.qq强制全屏<meta name="x5-fullscreen" content="true">

移动端适配的方案最火的一个库是淘宝的Flexible,看Flexible库主要做的事情：
（不过现在有的都使用vw和vh来做移动端适配了）

1.判断页面有没有meta[name="viewport"]和meta[name="flexible"]如果有就根据具体viewport和flexible里面的具体内容计算出 scale和dpr；dpr主要是为了不同像素比屏幕下显示文字用的，而 scale是为了解决 1px的线过于粗的问题。
2.如果没有viewport和flexible就根据win.devicePixelRatio来计算出scale和dpr,这里需要判断下是android还是iphone;然后设置data-dpr属性，值是dpr；然后再创建出meta-viewport
3.还有个功能是根据页面的宽度docEl.getBoundingClientRect().width实时设置更新html下的font-size的值，当然rem也就随之更新了
4.还有一点：监听resize和pageshow，随时更新rem；
5.还有一点： 通过判断ajax加载数据完成Document.readyState 和dom树加载完成DOMContentLoaded来随时更新body下的fontSize；
6.还有px2rem和em2px两个函数进行px和rem的转换；
7.这里涉及到540px；因为iphone6Plus也就414px；大于540基本是ipad设备了；

flexible缺陷

1.针对iphone做了些适配；所有安卓设备dpr都是1，很多 Android高清屏下页面图片会不清晰
2.不是纯css的移动适配方案，需要引入js文件;
3.不支持响应式设计方案，响应式设计需要用到css3媒体查询，根据查询到的设备宽度使用不同的css样式。而引入flexible的页面会根据dpr进行缩放，css3媒体查询得到的是缩放前的宽度而不是缩放后的宽度。
4.会涉及到小数问题，不是很精确；