关于javascript:记录一下浏览器缩放和移动端缩放的区别其实两者是有很大的不同的之前一直搞不明白

间接问 AI 它们之间的区别的话，是这么答复的

浏览器缩放和挪动端缩放是两种不同的概念，它们波及到用户在不同设施上扭转网页内容大小的形式。以下是它们的次要区别：

1. 浏览器缩放（Desktop Browser Zoom）：

   • 浏览器缩放是指在桌面计算机浏览器上，用户通过调整浏览器窗口的缩放级别来扭转网页内容的大小。
   • 用户能够应用浏览器的缩放性能，通常通过按住 Ctrl 键（在 Windows 上）或 Command 键（在 Mac 上）并滚动鼠标滚轮或应用快捷键来实现。也能够在浏览器菜单中找到缩放选项。
   • 浏览器缩放会同时扭转网页的文本、图像和布局大小，以适应用户的缩放设置。这能够用来增大或减小整个页面，包含文字和图像。

2. 挪动端缩放（Mobile Device Zoom）：

   • 挪动端缩放是指在挪动设施（如智能手机或平板电脑）上，用户通过手势来放大或放大网页内容，而不是调整浏览器窗口的大小。
   • 用户能够应用手指捏合或开展手势来管制网页的缩放级别。将两个手指捏合在一起会放大页面，将它们开展会放大页面。
   • 挪动端缩放通常只扭转网页的视觉出现，而不会扭转网页的理论布局或文本大小。这意味着页面元素的物理大小和排列形式不会扭转，只是视觉上会变得更大或更小。

总的来说，浏览器缩放和挪动端缩放是用于不同类型设施和交互方式的调整页面大小的办法。浏览器缩放更实用于桌面计算机，而挪动端缩放则更实用于触摸屏设施，它们的成果和用户体验有所不同。在网页设计中，须要思考到这些不同的缩放形式，以确保用户在不同设施上都能取得良好的用户体验。

以下是我的了解

首先浏览器缩放会扭转分辨率

我说的分辨率是浏览器为以后网页容器设置的分辨率，而不是屏幕的物理分辨率哟。

很显著，假如当我 css 设置 100vw,100vh 后，相应元素占满全屏，此时元素宽高为 100px,200px。
那我缩放大小为 50% 后，还是占满屏，且宽高为 200px,400px。所以分辨率此时是变了的。

而挪动端只会像放大镜似的放大放大

看下挪动端像方才的设置，挪动端放大放大其实分辨率是没有扭转的，页面加载后它就设置好了视口分辨率，放大放大只是将该视口进行像放大镜似的放大放大，放大后被遮挡的局部就能够左右滑动来浏览了。
所以像我方才设置的元素在浏览器上无论怎么放大放大，它所有内容都能一眼看到，而在挪动端上放大了就看不全了，只能上下左右滑动来看全，放大的话占不满它又主动回弹去占满视口了。

优缺点

浏览器的话放大放大会导致元素排列发生变化，因为设置固定宽度和百分比宽度的元素在某一分辨率下长的差不多，分辨率一变就大变样了，而挪动端的话放大放大就对网页元素的排列没影响了，只是把所有内容都放大了嘛。

挪动端呢，能够在 head 里增加以下标签来限度初始分辨率，具体属性能够百度查看

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=0.5, user-scalable=yes">

以上就是我的简略了解，记录以下避免遗记。

原文链接