viewport

在移动端，html的默认宽度一般是980px。但是有的型号不同，这个值也会不同。可以使用document.documentElement.clientWidth获取这个值。能获取到980px必须是没有加上viewport属性的mata标签后面的content内容的情况下， 才能拿到， 否则拿到的是设备的宽度 。

有了这一行东西存在，再去获取document.documentElement.clientWidth的时候， 就是正常的值了(iphone6/7/8=375)。

viewport 的 content

width: 定义视口的宽度，值为一个正整数， 或者字符串device-width(设备实际宽度 css 像素)。
height：一般不会管这个高度， 因为高度是靠内容撑起来的。
user-scalable： 是否允许用户和浏览器的缩放。
initial-scale：页面初始缩放值。计算方式： css像素 / viewport 的宽度
maximum-scale： 最大允许缩放比例
minimum-scale： 最小允许缩放比例

content="width=400, initial-scale=1.0"同时存在的时候，实际计算出来谁大取谁的值。所以在设备尺寸不同的时候， 他俩是不能做适配的。

一般来说， 做适配的时候， 需要如下设置， 禁止一切非开发者掌控的行为， 然后适配成用户可以最佳体验的大小（原生APP为啥不能缩放？）， 这些缩放也就没有必要了。

image.png