这篇文章我不想好好写，因为我害怕你们都学会了。写乱一点只有自己可以看懂。hh。
如果不写meta name="viewport"，安卓和ios css屏幕宽度都是980,手机上也都是下图的效果。
所以meta viewport规定了画布的css尺寸或者说css像素值。 不写meta viewport的效果相当于写了980固定值，也可以很好的移动端适配，只是980这个值太大了。
<meta name="viewport" content="width=980, initial-scale=1.0" />
需要注意有时候网页展现的时候明明都是445，但还是超出去了，是因为你需要设置user-scalable=no，不然老有这种需要手动缩放的奇奇怪怪的问题。
width=device-width, initial-scale=1.0, user-scalable=no 这三个值要好好配合就能做好适配。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
device-width是这正常值，表示手机屏幕宽度360px，viewport画布就360px，viewport就是屏幕宽度。
这样其实不好，要适配的手机就太多了。
移动端适配直接写
<meta name="viewport" content="width=500, initial-scale=-1, user-scalable=no" />
注意initial-scale可以写负数，-1，或者不写initial-scale这个字段都可以。他就会自动缩放比例，500px的画布占满手机屏幕。否则例如安卓360px屏幕宽度的，500就会超出屏幕，这是没有自动缩放适配导致的，或者-1或者不写就行了。不可以写0，0的效果是屏幕变成物理px像素值的太小了，太大了。
效果就可以实现所有手机都按网页响应式500px状态展示了。
如果你要坚持使用<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
你可以使用transform scale缩放方案，或者zoom缩放或者css scale方案， 最推荐zoom方案，他现在已经被所有浏览器支持了，是个完美替换viewport的方案。 这三个的区别在这篇文章，juejin.cn/post/748855… 三个缩放的demo代码分别在这三个index.html文件里面，核心的zoom方案在index2.html中 codesandbox.io/p/sandbox/t…
Zoom方案的优势在于，直接改变元素的实际尺寸和布局空间，不会创建新的图层，不需要转换坐标。
