移动端开发学习01： viewport视口的概念01——解释三大视口

提示：
本文为移动端开发学习栏目：移动端开发学习01： viewport视口的概念01——解释三大视口

---

# 视口的概念

浏览器的窗口宽度

来一组代码查验浏览器的窗口宽度

<script>
    //   窗口的变化
    window.addEventListener('resize', function () {
        getClientWidth();
    })
    window.onload = function () {
        getClientWidth();
    }

    function getClientWidth() {
        let width = document.documentElement.clientWidth;
        document.querySelector('h3').innerText = width + 'px';
    }
</script>

浏览器开启移动模式的窗口

会发现除iPad Pro所有的窗口模式的默认宽度都是980px

为什么是980px呢？

这要讲一个历史故事了，在智能手机还没有普及的年代，那时候我甚至还没听说过苹果手机，那是诺基亚的天下，移动端的页面开发少之又少，所以没有一个统一的开发标准。我甚至在我大爷的老年机上用过QQ的移动端，一个个感觉跟列表一样的模块，只能发消息，其他啥也不能干。

但是当智能手机普及后，尤其是iPhone4的发布后，网页阵地从pc端转移到移动端可以说是大势所趋。那么问题就来了，手机厂商总不能出一款手机要求各大门户网站改一次页面吧。于是乎就有了移动端布局三大视口（viewport）。

viewport

viewport，我暂且翻译成视口，对于手机浏览器默认做了两件事：页面渲染在一个980px(IOS)的viewport（安卓viewport宽度不固定），完成了缩放技术。

加载视口代码

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

加载视口代码后的窗口宽度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

聊视口前，我要跟大家聊一聊“Retina”。

Retina（一种新型高分辨率的显示标准）

所谓“Retina”是一种显示标准，是把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。

这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。也被称为视网膜技术。

简单来说就是，将一个像素分成两部分，从逻辑上使分辨率凭空提高两倍。

到现在为止，最高三倍。

但这带来一个问题，那就是，到底是原来的一个像素块是1px，还是切开后的是1px。

这里就涉及到物理像素和逻辑像素的问题。

物理像素和逻辑像素

物理像素

设备屏幕实际拥有的像素点。比如一个图片，细分最小单位就是像素，也就是说图片是由许多的像素构成。

一个设备生产出来，他们的像素就已经确定了，荣耀20的分辨率是2340x1080，代表屏幕的宽是1080px，高是2340px。

逻辑像素

也叫“设备独立像素”（Device Independent Pixel,DPI）可以理解为反映在CSS里的像素点，也就是说CSS像素是逻辑像素的一种。

CSS像素的单位也叫PX。他是图像显示的基本单元。

CSS像素=设备独立像素=逻辑像素。

通过视网膜技术带来的，便是逻辑像素和物理像素的倍数关系：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRn2Buev-1625704471703)(F:\PC端数据及文件记录\Typora\web全栈\08.移动端开发\images\01.png)]

看到这里就容易解释我们要说的三大视口

viewport视口（视窗/视图）类别

1.layout viewport：布局视口，是移动浏览器的默认视口，用于解决早期的pc页面在手机端显示的问题，除了ipad pro（1024px）外，其他的设备默认宽度都为980px.

2.visual viewport :视觉视口 、设备视口 、是移动设备的真是物理宽度，物理像素。我的手机是荣耀20，手机提供的分辨率参数是2340x1080。当然，这肯定不是我们用肉眼看见的参数。

3.idea viewport：理想视口，表示的是逻辑像素宽度。当在移动端开发界面的时候，我们所使用的就是理想视口。