viewport (视口)

视口(viewport)

视口(viewport)是用来约束网站中最顶级块元素的, 即决定了的大小

PC设备

在pc设备上viewport的大小取决于浏览器窗口的大小, 以css像素作为度量单位(pc端视口(virewport大小与浏览器大小一致)).
通过以往css的知识, 我们都能理解的大小是会影响到我的网页布局的, 而viewport又决定了的大小, 所以viewport间接的并决定了我的网页布局.

移动设备

移动设备的屏幕普遍是比较小的, 但是大部分的网站又都是为PC设备来设计的, 要想让移动设备也可以正常显示网页, 移动设备不得不做一些处理;
在移动设备上viewport不再受限于浏览器窗口, 而是允许开发人员自由设置viewport的大小, 通常浏览器会设置一个默认大小的viewport, 为了能够正常显示那些转为pc设计的网页, 一般这个值的大小会大于屏幕的尺寸.

viewport

移动设备上有2个viewport(为了方便讲解人为定义的), 分别是layout viewport 和ideal viewport
layout viewport(布局视口): 指的是我们可以进行网页布局区域的大小, 同样以css像素的计量单位, 可以通过下面方式获取;

    document.documentElement.clientWidth
    document.documentElement.clientHeight

如果要保证为PC设计网页在移动设备上布局不会发生错乱, 移动设备会默认设置一个较大的viewport, 这个viewport实际指的是layout viewport

ideal viewport(理想视口):设备屏幕区域,(以设备独立像素PT, DP作为单位) 以CSS像素作为计量单位, 其大小是不可能被改变的通过下面方式可以获取
获取ideal viewport有两种情形

    新设备
        window.screen.width
        window.screen.height
    老设备
        window.screen.width / window.devicePixelRatio;

viewport 标签

    <!-- 对viewport的设置的meta建议写在已有的meta标签后面(<meta charset="UTF-8">) -->
    <!-- name="viewport":说明当前meta标签是用来设置viewport的属性, 这个属性只有在移动端才会有效 -->
    <!-- content="width=device-width" : 进行viewport的设置 width: 设置viewport的宽度 device-width:获取当前设备的宽度 -->
    <meta name="viewport" content="width=device-width">

    <!-- initial-scale=1: 设置初始缩放比例 当设置了 width="device-width", 也达到了 initial-scale=1的效果
    其实initial-scale=1 = ideal viewport / lay viewport 意味着initial-scale=1, 相当于设置两个viewport的宽度一致 -->
    <meta name="viewport" content="initial-scale=1.0">

    <!-- 为了兼容性 一般情况下 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- maximum-scale: 设置最大缩放比例
    minimum-scale: 这是默认状态下最小的缩放比例
    user-scalable: 设置是否允许用户缩放 no/yes -->
    
    <!--快捷键 meta:vp + tab键-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum=1.0, minimum=1.0">

移动端常见适配方案

设置<meta name="viewport" content="width=device-width", initial-scale=1.0">

设置页面宽度为百分比