效果
图中可见
- 浏览器视口宽度为 750
- 期望视口宽度为 375
- 最大缩放为 2 即 375 * 2
移动端开发以往我总喜欢为了设备显示一致而采用rem或者vm、%等布局。
最近详细阅读、物理像素、css像素以及视口尺寸让我产生了如此适配移动端的想法，期望与大家交流还望大家不吝赐教。
物理像素
物理像素也叫做设备像素，也就是我们常说的分辨率，正常开发中我们的 1px 单位对应的即是分辨率中的 1px
随着手机等小尺寸设备的分辨率越来越高，这往往开始出现很多的布局问题。
随便举例几个宽度尺寸勿较真，只是好算好表述
| 类型 | 物理尺寸 | 分辨率尺寸 |
|---|---|---|
| 电脑 | 40cm | 1920 |
| 手机 | 10cm | 1920 |
| 老手机 | 10cm | 320 |
| 手表 | 5cm | 1920 |
可以想象一下，一部手机和一个手表使用 1920px 布局的恐怖，你如何保证 1px 在不同物理尺寸的设备上保持相对一致，即使你用1920px布局成功、那么以前的手机你怎么兼容老设备，1920px的布局尺寸放到 320px的分辨率可以想象这种刺激，而明明手机物理尺寸是一致的。
css像素
对于我们web开发的同学，css像素肯定不陌生、但上面的 物理尺寸不知道是不是仅只有我陌生。
web开发学习以来，我从来没考虑过上面的问题，那时候我们就只知道，电脑 1920、手机 375等等等,物理尺寸越小所对应的像素也越小。
那么也就是说、css像素经过了 逻辑转换 把 375px 转换为了手机的分辨率尺寸。
这个转换过程用到的是 DPI 即每英寸的像素数。
设备尺寸越小分辨率越高对应的DPI也即越大，相反对比也越小，所以css像素用起来很像 物理像素。
思考
简单了解以上基本的换算，我就在想使用 理想视口如果不设置初始化缩放initial-scale，那么理想视口宽度会自适应屏幕视口宽度缩放，如此不跟rem、vm、%一个效果，如果想设置最大的 视口宽度 使用 maximum-scale来控制最大允许的缩放倍数，这样想我就觉得自己以前的换算有点多余了。
但我问了问deepseek它说。
如果是小项目，我觉得可以尝试尝试。
