html中的meta标签的viewport有什么用？

落日映苍穹つ 2022-10-15 14:54 177阅读 0赞

## 首先介绍几个概念： ##

*  物理像素/设备像素。  
    是设备能控制显示的最小单位，我们可以把它看做显示器上的一个点。我们常说的 1920x1080像素分辨率就是用的设备像素单位
 *  css像素/设备独立像素  
    css像素/设备独立像素，是一个相对单位，css像素主要用在浏览器中，在pc端一个css像素对应一个设备像素，在移动端1个css像素对应dpr\*dpr个设备像素
 *  设备像素比  
    简称dpr，一般通过window.devicePixelRatio获取，表示 设备像素/ css像素（设备独立像素）
 *  屏幕分辨率  
    屏幕分辨率指的是屏幕纵横方向上的像素个数，比如屏幕的分辨率为640\*480是说水平方向可以显示640个像素点，垂直方向有可以显示480个像素点；  
    显示的像素点越多画质越细腻清晰；相同尺寸的屏幕分辨率越高，单个像素（设备像素）的尺寸越小，因此为了让相同尺寸的屏幕看到的元素的大小差不多,1个css像素所表示的设备像素要越大，也即设备像素比就要越高;

在html文件中，我们经常会用到

## layout viewport ,visual viewport,ideal viewport ##

在PC端的页面中，1个css像素对应1个设备像素，用肉眼看到的大小也是一样的，当调节屏幕分辨率之后看到的元素会跟着变大或变小  
而在移动端随着屏幕分辨率的提高，由于手机的尺寸比较小，手机设备的设备像素比就不再是1，否则会导致手机上看到的1px比电脑上看到的1px小很多

*  visual viewport是浏览器窗口的视口大小，通过window.innerWidth获取
 *  layoutviewport是浏览器的布局窗口大小，默认情况下大部分设备是980px，通过document.documentElement.clientWidth获取，默认不设置metaviewport, 布局大小就是layoutviewport，浏览器为了让整个布局都展示出来会对整个页面进行默认的缩放调整（当然不同的设备表现形式不一样，现代浏览器基本都是这种实现）；
 *  ideal viewport是浏览器的理想窗口大小，我们平时在pc端的chrome 浏览器的模拟移动设备时看到的就是各个设备所对应的idealviewport的大小,通过width=device-width或者initial-scale=1.0就可以实现，在这种viewport下我们看到14px的字体大小和pc端是一致的，设备像素比和ideal viewport在手机出厂时就已经确定好了

屏幕缩放时，css像素对应的设备像素会变大或变小，所以你看到的元素也会跟着变大或者变小

**思考几个问题？**

1.  为什么移动端需要@2x或则3x的图片
2.  移动端1px像素问题是解决什么的？