<meta name="viewport" content="initial-scale=0.3, user-scalable=no, viewport-fit=cover">
物理像素：每个手机不同，例如普通手机250px，高清手机500px，视网膜1000px
设备独立像素：不管是普通手机、高清手机，假设都是宽度都是10cm，在我们肉眼看来，都叫他250px。
问题场景：
写代码的时候，设置某个divwidth:125px，我们希望这个div设备独立像素是125px。假设，手机宽度250px（独立像素），那么这个div应该占设备宽度的一半。但是在高清设备上这个div只占设备宽度的1/4。
原因：
高清手机宽度有500个物理像素，我们设置的css和物理像素一一对应。举个例子：手机的物理像素越高，这个div越短。因此得想办法，物理像素越高，把css像素成比例放大，保持设备独立像素不变。
解决办法：
当手机的的物理像素有500px是，div的宽度应该变为250px；当手机物理像素1000px时，div的宽度应该变为500px。
写代码时只需要写125px，然后在html的head里加上
<meta name="viewport" content="initial-scale=0.3, user-scalable=no, viewport-fit=cover">
根据initial-scale，把DIV的宽度也就是125px放大相应的倍数。
结果：
假设现在 Window.devicePixelRatio是3，原先的125px会变成： 125*3=375px，虽然屏幕的物理像素变为原来的3倍，但是人眼看上去DIV的宽度不变。
假设物理像素变为3倍，DIV的宽度不变，那么肉眼看起来DIV的长度变原来为1/3
