03-移动端适配

移动端适配

视口

在CSS中的像素单位并非真实的物理像素单位，而是浏览器自动调整真实物理像素与CSS中像素单位的比例，所以在开发中无需关心物理像素，但是由于不同大小的屏幕会导致浏览器为了将所有内容都显示出来强制将页面缩放到当前视口大小，所以就引入视口概念，规定视口大小的元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 表示当前页面视口宽度等于设备宽度，初始缩放比例为1 -->
<!-- 为了不让用户进行页面缩放，又要考虑兼容性，可以使用以下标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0">
<!-- 不允许用户进行缩放，并且最大和最小缩放比例都是1.0，但是有的浏览器这么写也是不管用的，用户照样可以缩放 -->

单位

在对于设置元素的单位上需要使用相对单位，最常用的就的rem，在设置单位时需要用实际单位与rem进行换算，再通过JavaScript控制整个页面的rem值就可以使得整个页面中整体等比例的缩放（若浏览器支持vh/wh单位就使用vh/wh单位无需使用JavaScript进行控制）

单位换算： $当前px\div 根px = 当前rem$ ，根px为当前视口宽度，这就模拟了vh/wh单位，占据整个视口的多少倍，但是这样的除法计算，除啦等于视口宽度的大小以外，算出来的总是小数，为了得到整数倍的rem，就可以让根px除以一个合理的系数，得到一个更小的值，这样在换算时就可以得到一些整数倍的rem了

若在移动端强行使用像素单位，该像素单位对应的真实物理像素会根据drp（Device Pixel Ratio，设备像素比）来进行显示，虽然无法使用程序控制drp，但是使用JavaScript获取drp的值，然后再通过动态的生成meta标签控制缩放比例，比如：若当前drp为2时，就将缩放比例设置为0.5，以此类推（drp有1，2，3个值）

淘宝已经实现了一个lib-flexible的适配方案，原理就是这样，在自己的项目中引入flexible.js即可，注意不要使用最新版，使用经典版，因为最新版是向vh/wh单位进行过渡版本，没有实现动态的生成meta标签功能解决drp问题