为什么网页用移动设备模式来预览会整体缩小？

我测试了好几次，我都发现这个状况，不管我设置一个元素的宽度多大（超过980px），最终都会整体缩小，元素会在铺满整个屏幕。而且这个时候的html元素还是980px。我有以下疑问：

这个html元素是不是可以认为就是布局视口？因为我看网上获取布局视口大小的时候，是用document.documentElement.clientWidth
还有为什么能够整体缩小，永远都不会出现滚动条？这是所有移动设备浏览器的默认操作吗？那这个缩小，它缩小的是什么？
我自己的理解，好像发现了个规律：我可以认为布局视口其实就是一个张980px的大图片，但是因为移动设备浏览器默认将这个980px的大图缩小到能够紧贴整个可视视口的区域，也就是让布局视口看上去等同于可视视口（但是可视视口仍然不等同于布局视口）。
我总感觉这个理解有问题，但是实验结果感觉可以解释的通。
我是不是有什么没有注意到的地方，或者有误解的地方，麻烦老师指教。

慕移动3569406 2020-03-20

源自：移动Web开发入门 2-6 视口-viewport（2）

收起

2回答

提问者慕移动3569406 2020-03-20 23:42:02

我在补充一下问题描述：

为什么明明移动设备是 375*667，而在页面上放了一个div为1000px的元素，点了控制台里面那个小手机，切换为移动设备模式，结果这个div没有让网页出现滚动条，而且貌似还整体缩小了，网页能够完全显示了，我想知道这是什么原理？是不是移动端浏览器都会自动计算了缩放比，让网页能够完全显示？这个缩放，缩放的是布局视口吗？
我之所以会有这个疑问是看到下面图片里面说的，这个情况只有iphone手机才有。iphone手机在访问没有设定initial-scale设置的网站的时候，会自动计算initial-scale, 让页面能够整体显示，但我的手机不是iphone，却也有这个现象。也就是访问PC端网站的时候都会等比缩放，让网页都完全显示，不会出现滚动条。而不是像文章说的那样，只有iphone手机会。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=320,initial-scale=1">
  <title>Document</title>
  <style>
    *{margin: 0;padding: 0}
    .div{
      width: 1000px;
      height: 50px;
      background-color: red;
      border-right: 10px solid;
    }
  </style>
</head>
<body>
<div class="div"></div>
</body>
</html>