为什么当initial-scale小于等于1的时候，下面三个是相等的，而大于1时，不相等？

console.log(document.documentElement.getBoundingClientRect().width);

console.log(document.documentElement.clientWidth);

console.log(window.innerWidth);

为什么当initial-scale小于等于1的时候，下面三个是相等的，而大于1时，前面两个相等，但不等于最后一个？这三个分别是获取到什么？

源自：移动端屏幕适配 3-2 通用适配实现

收起

3回答

卡布琦诺回答被采纳获得+3积分 2020-01-05 19:56:20

同学你好，测试效果如下

老师这边测试的结果都是相等的。建议同学将自己测试的完整代码粘贴上来，以便于快速准确的定位问题，并帮你解答，祝学习愉快！

慕尼黑5122342 提问者 #1

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=2, maximum-scale=2, minimum-scale=2, user-scalable=no"> </head> <body> <div>sdfsdfdsf</div> <script type="text/javascript"> console.log(document.documentElement.getBoundingClientRect().width); console.log(document.documentElement.clientWidth); console.log(window.innerWidth); </script> </body> </html> 我是在移动端测的

2020-01-05 20:25:42

好帮手慕言 2020-01-06 10:22:15

同学你好，intial-scale: 初始缩放比例，如果像同学这样设置的话，那么，同学打印前两个值，大约是最后一个值的几倍。比如设置为2：

如果还有其他疑问，建议在问答区重新提问，便于后期查找总结

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

好帮手慕星星 2020-01-04 14:18:57

同学你好，这边测试三个输出的值都是相等的：

同学可以重新进行测试或者将自己写的代码粘贴上来，老师看一下。

祝学习愉快！

提问者慕尼黑5122342 #1

我是将meta标签设置成这样： <meta name="viewport" content="width=device-width, initial-scale=2, maximum-scale=2, minimum-scale=2, user-scalable=no"> 后面三个属性没设置的话就会相等，如果设置了就不相等了。这是什么原因？

2020-01-05 18:21:03