这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放。
手机存在一个能完美适配的理想viewport, 分辨率相差很大的手机的理想viewport的宽度可能是一样的, 这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的, viewport的好处就在于一套css可以适配多个机型。
在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px，这是因为不同的移动设备有不同的像素密度。有关这个属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是
1px变粗的原因： viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。
解决方案
1.rem解决：
2.flexible.js
这是淘宝移动端采取的方案, github的地址: https://github.com/amfe/lib-flexible . 前面已经说过1px变粗的原因就在于一刀切的设置viewport宽度, 如果能把viewport宽度设置为实际的设备物理宽度, css里的1px不就等于实际1px长了么. flexible.js就是这样干的。
<meta name=”viewport”>里面的scale值指的是对ideal viewport的缩放, flexible.js检测到IOS机型, 会算出scale = 1/devicePixelRatio, 然后设置viewport
3.伪类+transform实现
对于解决1px边框问题，我个人觉得最完美的解决办法还是伪类+transform比较好。
原理：是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位
转自 https://blog.csdn.net/a419419/article/details/80217328
首先css3规定1rem = html根节点的font-size，rem也就是root em简写。
为了方便计算通常设置根节点font-size = 100px 那么 1rem = 100px
核心思想： 百分比布局可实现响应式布局，而rem相当于百分比布局。
实现手段： 动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n * (window.devicePixelRatio||1)。 这里考虑设备像素比。通过此方法，rem大小始终为width的n等分。
因为ui设计稿是指定的某个分辨率，要想在其他分辨率下使用同样的尺寸就需要等比缩放，因此需要js动态计算rem。
width / n 是将屏幕分为了ui设计稿的n等分，当设备宽度不是ui设计稿的宽度时，页面等分不变，表现为页面百分比缩放。
举个例子：在1920 * 768分辨率下的ui设计稿有个200 * 200 px的盒子，那么css文件中该盒子样式为 2 * 2 rem 。在屏幕1680宽度下：
方式一：动态计算rem
html.fontSize = 当前宽度/1920 * 100 为了方便计算，这里乘以100
该盒子在页面中实际表现宽高为：2rem * 1680/1920 px = 175 px，也就是 175 * 175 px
方式二： 写死 html.fontSize = 100px
该盒子在页面中实际表现宽高为： 2rem * 100px= 200 px， 也就是 200* 200 px
最后用屏幕比例计算正确的200px在1680宽度下应该是多少：x/1680 = 200/1920 =>x = 175。
由此说明动态计算rem是正确的，不然不能同比缩放。
其实上面的x/1680 = 200/1920 也就是x = 2 * 1680/1920 * 100 = 2 * html.fontSize其实就是rem换算为px的过程。
设备像素也就是物理像素： 是屏幕上的一个个无法再拆分的点。
设备独立像素： 是虚拟像素（横坐标轴上或纵坐标轴上的），比如某一台手机分辨率（设备像素）是480*800，纵向手持的宽度（设备独立像素）是320px，那么设备像素比就是480/320=1.5.
设备像素比： 设备像素比 = 设备像素 / 设备独立像素
注意：设备独立像素 在移动端 是不一定等于 css像素px的。
参考: https://javaforall.cn/107904.html
Pixel像素，相对长度单位。像素是相对于显示器分辨率而言。
相对长度单位，相对于 当前对象 内文本的字体尺寸，如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em = 16px。
由上可见，em的值并不是固定的，它的值跟其父级元素的字体大小紧密相关。
示例：
rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？
目前除IE8及更早版本外，所有浏览器均已支持rem。对于不支持的浏览器，可以多写一个绝对单位的声明。如此浏览器会忽略rem设定的字体大小。如下：
注意：
px、em、rem在线转换工具： http://pxtoem.com/
参考自： https://blog.csdn.net/qq_41893551/article/details/81258600
