移动端适配

【菜鸟一枚~哪里不对，希望大佬可以帮忙纠正】

---

以下是我电脑打开浏览器F12模式下的数据：
我的电脑分辨率当前为1920*1080
获取screen.width && height，为1536*864
获取window.innerWidth && height，为960*734
获取document.documentElement.clientWidth && clientHeight，为943*734
获取document.documentElement.offsetWidth && offsetHeight，为600*734
获取window.devicePixelRatio，为1.25
放大200% 获取screen.width && height，为1536*864
放大200% window.inner.Width && height，为480*367
放大200% document.documentElement.clientWidth && clientheight，为472*359
放大200% document.documentElement的offsetWidth && offsetheight，为600*359
放大200% 获取window.devicePixelRatio，为2.5

---

PC上的viewport

• window.innerWidth – 浏览器窗口的内部宽度 (布局视图)
• document.documentElement.clientWidth-浏览器'视口'的大小（视觉视口）（不包括工具栏和滚动条）
• document.documentElement.offsetWidth-DOM文档的根节点html元素对象的宽度
  
  

  草图.jpg

所以：

• 上面数据innerWidth比clientWidth大，多了滚动条的距离，俩个height都一样，因为此时没有横向滚轴
• 当你给HTML元素设置了width/height之后，请使用offsetWidth/offsetHeight，其它俩个获取的值不是你设置的值
• 只有在默认情况下，offsetWidth == clientWidth == innerWidth

---

DPR

• 设备物理像素：(Physical Pixel)这个好理解，衡量设备的度量单位。
• 逻辑像素：（DIP&DP&PT&SP）这个也好理解，你可以把它当做用来逻辑运算的度量单位。
• CSS像素，为Web开发者创造的一种度量单位。

所以：DPR=物理像素/逻辑像素，下面我会用dpr=pp/dips来解释我的上述数据。

首先，物理像素是设备出厂时就定死的，设想一下你用ps的时候：

• 上面会有刻度尺来充当度量单位，当你放大的时候，本来一小格的度量单位，是不是会被慢慢拉长，然后不得不换成更小的度量单位（多个小格）
• 图片被放大之后，由于当前设备物理像素不够，图像将显示不全（当然如果物理像素超大，这个被放大的图片扔进去，也会变贼小）

开始正题：

有一个2*2的矩形（dips），假设此时未被放缩，dpr为1，矩形占4个小格子占满了当前设备，也就是正好1个逻辑度量单位（dips）就是1个物理像素，很好理解。

然后你把它放大200%之后，之前那一格度量单位被拉长了，拉长到横跨物理设备左边到右边，之前只占一半。此时那1个逻辑度量单位（dips）就占了2个物理像素，即dpr=2/1=2

此时再来说我之前PC的数据：
1920/1536=1.25。由于我的电脑分辨率是1920（物理像素），而我的浏览器全屏显示宽度为1536（dips），而浏览器工作是根据dips的宽度，也就是,1536个逻辑像素，填充满了1920个物理像素，即1dips=1.25pp

因为我打开了F12调试模式，所以当前的viewport（视区）只有943PX（css像素，留个坑），对应了943*1.25=1178.75个物理像素。当我放大200%之后：viewport的width和height均变为之前的一半，眼尖的发现为什么俩个的height有点不同，因为在我放大的时候，出现了横着的滚轴，所以自然viewport的高度变小了一点。此时的dpr自然就是：dpr=1178.75/472=2.5

---

移动端的viewport

前言：正常情况下PX是可以拿来做dips的（在PC端），或者说在理想viewport下，1px就是1dip。但是它只是浏览器的一个度量单位，和dips有区别

在移动端有三个viewport

1. layout viewport：指的是布局视口，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。
2. visual viewport：指的是视觉视口，用户正在看到的网站的区域，与设备屏幕一样宽。
3. ideal viewport ：指的理想视口，当网站是为手机准备的时候使用。使用meta声明。早期iPhone理想视口为320*480 dips。

物理屏幕分辨率：screen.width/height（有兼容问题不建议使用）
布局视口：document.documentElement.clientWidth
视觉视口：window.innerWidth
理想视口：screen.width/height（有兼容问题不建议使用）
设备像素比：window.devicePixelRatio
屏幕方向：window.orientation

由于手机浏览器不知道，你的页面是不是为移动端做的，所以会有一个默认的较大的布局视口，来放置你的PC页面，使得你可以通过移动，放缩来浏览。甚至有的手机浏览器会通过计算，得到一个比例，来放缩你的PC页面，放在你的视觉视口，使得在手机上也能够'正常'浏览，但现在，开发者们都会针对移动端来适配，通过meta的viewport，让width=device-width，使得layout viewport=visual viewport，所以它俩就不过多解释。

由于没有在移动端测试过，所以只能拿拿flexible.js的数据来臆想一下

切换到dpr=1的设备时，flexible.js自动生成标签，可以看到里面显示initial-scale=1，同时它也等于1/dpr=1，html元素宽度为320（视口的宽度）
此时dpr=1，1PX=1dip=1物理像素！

切换到dpr=2的设备时，flexible.js自动生成标签，可以看到里面显示initial-scale=0.5，同时它也等于1/dpr=0.5，html元素宽度为640（视口的宽度），也就是浏览器当前视觉视口宽度为理想视口（设备宽度）的2倍，即1dip=2PX；
此时dpr=2，2PX=1dip=2物理像素！

---

总结

在PC上，DPR会根据你的电脑分辨率（物理像素） / 理想视口（screen.width）得到，然后在你的视觉视口上，以此DPR来对应逻辑像素和物理像素的关系

在移动端上，同样DPR=手机分辨率 / 理想视口（ideal viewport）得到，也是应该在视觉视口上，以此dpr来对应CSS像素和物理像素的关系。当width=device-width，且initial-scale=1时，三个视口相等

zoom会影响CSS像素和物理像素的比例，比如你给html元素添加style：zoom：2；，或者initial-scale=2，都会放大viewport视口的大小，导致放大2倍CSS像素和物理像素的比例，但DPR不会变，

dpr=（设备物理像素）pp/（设备独立像素）dips

zoom=（visual viewport）css/（ideal viewport）dips