viewport 视口

TANGYC_

于 2022-09-09 20:07:22 发布

阅读量521

点赞数

文章标签： javascript html webview css

本文链接：https://blog.csdn.net/weixin_45463061/article/details/126788335

版权

视口的概念

视口，英语全称 viewport，指的是设备的屏幕上能用来显示我们的网页的那一块区域，再具体一点，就是浏览器上（也可能是一个 app 中的 webview）用来显示网页的那部分区域。
在这里插入图片描述
在早期 PC 年代，电脑上的网页常见的宽度有：960px、980px、1190px、1210px，其中以 980px 居多。

到了移动端时代，由于一开始并不存在专门的移动端网页，所以在最开始的时候也就自然而然沿用了这一设定，以苹果的 Safari 为首的浏览器默认采用的视口宽度就是 980px 的宽度，后面的很多安卓机型也都就沿袭了这一设定。

故事是这样的，有一天乔帮主在想一个问题，就是自己的苹果手机如果在市场上火爆了，但是各个网站还没有来得及制作手机版本的网页，那么用户不得不用手机访问电脑版的网页。如何用小屏幕访问大屏幕的页面也同样可读呢？
乔帮主就想着为手机固定一个视口宽度，让手机的视口宽度等于世界上绝大多数 PC 网页的版心宽度，就是 980px。这样，用手机访问电脑版网页的时候，刚好没有留白。像从 3000 米高空，俯瞰整个页面，用户想看哪个区域，可以用两个指头捏合，放大页面。
安卓手机也非常尊重乔帮主的决定，都把自己的手机的视口定位 980px。

此时使用手机浏览器打开电脑版的网页的效果如下：

在这里插入图片描述
可以看到在手机端的浏览器中，对网页进行了缩放，以便显示整张网页。之后用户可以将两个指头捏合，放大页面。

我们也可以进行一个简单的验证，如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 375px;
        display: flex;
      }
      .container > div {
        width: 50%;
        height: 50px;
      }
      .container > div:nth-child(1) {
        background-color: red;
      }
      .container > div:nth-child(2) {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div></div>
      <div></div>
    </div>
  </body>
</html>

在这里插入图片描述

如果注释掉 <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />这一行，那么，默认的视口宽度就是980

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0" /> -->
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        width: 375px;
        display: flex;
      }
      .container > div {
        width: 50%;
        height: 50px;
      }
      .container > div:nth-child(1) {
        background-color: red;
      }
      .container > div:nth-child(2) {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div></div>
      <div></div>
    </div>
  </body>
</html>

在上面的代码中，我们将默认的视口设置取消了，此时就会采用默认的 980px，而我们的 div.contianer 设置的为 375px，效果如下：

在这里插入图片描述

视口相关属性

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

属性名	作用
width	设置 layout viewport 的宽度，为一个正整数，或字符串"device-width"
height	设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
initial-scale	设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale	允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale	允许用户的最大缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许

关于缩放

最后要说一下关于缩放的问题。

前面我们说过，即使使用手机浏览器打开 PC 端的网页，手机浏览器也能很智能的对页面进行缩放，从而不出现滚动条。

在这里插入图片描述
有一个公式，那就是：

当前缩放值 = ideal viewport宽度 / layout viewport 宽度

比如说，我们不设置任何的 viewport meta 标签，此时 layout viewport 的宽度为 980px，但我们可以看到浏览器并没有出现横向滚动条，因为浏览器默认的把页面缩小了。

根据上面的公式，缩放比就为 375 / 980 = 0.38 左右。

也就是当前的 initial-scale 默认值应该是 0.38 这样子。但是如果指定了 initial-scale 的值，那么这个默认值就不起作用了。

最后总结一下，为了保证在不同设备中，显示网页的视口正常，最常见的设置如下：

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

之后我们书写移动端页面，也会采取此视口设置。

以上笔记整理于渡一教育谢老师课堂

TANGYC_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
viewport 视口

viewport 视口
复制链接

扫一扫