在移动端,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
网友评论