移动端适配（必须要知道的，亲测有效）

移动端适配，在开发中经常会遇到的问题：

一、各种单位概念理解

英寸：屏幕的物理大小，如电脑显示器的17、22，手机显示器的4.8、5.7等使用的单位都是英寸。一般说的屏幕的尺寸都是屏幕对角线的长度。1英寸 = 2.54 厘米

像素：像素即一个小方块，它具有特定的位置和颜色。图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。像素可以作为图片或电子屏幕的最小组成单位。

分辨率：屏幕分辨率（一个屏幕具体由多少个像素点组成。），图像分辨率（指图片含有的像素数。）。同一尺寸的屏幕、图片，分辨率越高，越清晰。
PPI(Pixel Per Inch)：每英寸包括的像素数。PPI越高，越清晰。
DPI(Dot Per Inch)：即每英寸包括的点数。DPI和PPI是等价的。

DIP或DP 设备独立像素：用来告诉不同分辨率的手机，它们在界面上显示元素的大小是多少

dpr（device pixel ratio）设备像素比：物理像素和设备独立像素的比值

//web
let dpr = window.devicePixelRatio;

//css 使用媒体查询min-device-pixel-ratio区分
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
    }

//React Native
PixelRatio.get()

web前端长度单位详解（px、em、rem、%、vw/vh、vmin/vmax、vm、calc()）

二、移动，web开发

移动端开发
1、在iOS、Android和React Native开发中样式单位其实都使用的是设备独立像素。

2、移动端开发中，UI给我们的原型图一般是基于iphone6（750*1334）的像素给定的。

3、为了适配所有机型，我们在写样式时需要把物理像素转换为设备独立像素。

web开发
web端用到最多的单位是px，即CSS像素。当页面缩放比例为100%时，一个CSS像素等于一个设备独立像素
页面的缩放系数 = 理想视口宽度 / 视觉视口宽度

三、移动端适配

1、视口(viewport)概念

视口共包括三种：布局视口、视觉视口和理想视口，它们在屏幕适配中起着非常重要的作用。

布局视口：在PC浏览器上，布局视口就等于当前浏览器的窗口大小（不包括borders 、margins、滚动条）。在移动端，布局视口被赋予一个默认值，大部分为980px

// 获取布局视口大小
document.documentElement.clientWidth / clientHeight

视觉视口：用户通过屏幕真实看到的区域。默认等于当前浏览器的窗口大小（包括滚动条宽度）

// 获取视觉视口大小
window.innerWidth / innerHeight

理想视口：网站页面在移动端展示的理想大小。在浏览器调试移动端时页面上给定的像素大小就是理想视口大小，它的单位正是设备独立像素。

screen.width / height // 获取理想视口大小

获取浏览器各种视口大小：

2、视口(viewport)适配（代码）

<meta> 元素 元数据信息。 告诉浏览器如何解析页面。

可以借助<meta>元素的viewport来帮助我们设置视口、缩放等，从而让移动端得到更好的展示效果

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />

为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口都尽可能等于理想视口。
设置width=device-width就相当于让布局视口等于理想视口
设置initial-scale=1;就相当于让视觉视口等于理想视口
这时，1个CSS像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面布局在各种设备上都能大致相似。

3、rem单位适配

flexible方案

核心代码：

	// set 1rem = viewWidth / 100
    function setRemUnit() {
   
        var rem = docEl.clientWidth / 7.5
        docEl.style.fontSize = rem + 'px'
    }
    setRemUnit()

竖屏、横屏、ipad、PC最全的适配JS

<script type="text/javascript">
	// 设备区分 （安卓、火狐、平板、PC）
	var os = function() {
   
		var ua = navigator.userAgent,
			isAndroid = /(?:Android)/.test(ua),
			isFireFox = /(?:Firefox)/.test(ua),
			isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
			isPC = !(/Android|webOS|iPhone|iPod|BlackBerry/i.test(ua));
		return {
   
			isTablet: isTablet,
		};
	}();
	(function (window, document) {
   
		function resize() {
   
			var docEl = document.documentElement;
			var clientWidth = docEl.clientWidth;
			var clientHeight = docEl.clientHeight;
			if (clientWidth < clientHeight) {
    // 手机竖屏
				docEl.style.fontSize = clientWidth / 7.5 + "px";
			} else {
    // 手机横屏 
				docEl.style.fontSize = clientHeight / 7.5 + "px";
			}
			if(os.isTablet) {
    //ipad 
				if(clientWidth >= 1366) {
   
					docEl.style.fontSize = clientWidth / 1366 * 100 + "px";
				} else {
   
					docEl.style.fontSize = clientWidth / 1024 * 100 + "px";
				}
			}
			if (os.isPC) {
    // pc
				if(clientWidth >= 1920) {
   
					docEl.style.fontSize = 1920 / 19.20 + "px";
				} else {
   
					docEl.style.fontSize = clientWidth / 19.20 + "px";
				}
			} 
		}
		resize();
		// reset rem unit on page resize
		window.addEventListener("resize", function () {