前端开发-视口

原创

程序员 NEO

发布于 2023-09-28 14:26:12

1740

视口概述

视口简单理解就是可视区域的大小我们称之为视口
在 PC 端，视口大小就是浏览器窗口可视区域的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板文件</title>
    <style>
    </style>
</head>
<body>
<script>
    console.log(window.innerWidth, window.innerHeight);
</script>
</body>
</html>

在移动端, 视口大小并不等于 窗口 大小, 移动端视口宽度被人为定义为了 980

那么在移动端为什么是 980 而不是其他的值呢，因为过去网页的版心都是 980，乔老爷子为了能够让网页在移动端完美的展示, 所以将 iOS 手机视口的大小定义为了 980，后来谷歌也觉得这是一个非常牛 X 的方案, 所以 Android 手机的视口也定义为了 980。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板文件</title>
    <style>
        div {
            margin: 0 auto;
        }

        .header-in {
            width: 980px;
            height: 100px;
            background: red;
        }

        .main-in {
            width: 980px;
            height: 300px;
            background: green;
        }

        .footer-in {
            width: 980px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-in"></div>
</div>
<div class="main">
    <div class="main-in"></div>
</div>
<div class="footer">
    <div class="footer-in"></div>
</div>
</body>
</html>

移动端自动将视口宽度设置为 980 带来的问题，虽然移动端自动将视口宽度设置为 980 之后让我们可以很完美的看到整个网页，但是由于移动端的物理尺寸(设备宽度)是远远小于视口宽度的，所以为了能够在较小的范围内看到视口中所有的内容, 那么就必须将内容缩小，(和前面文章当中讲解的 Canvas 时讲解的 viewbox 一样, 近大远小原理)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板文件</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

如何保证在移动端不自动缩放网页的尺寸，通过 meta 设置视口大小：

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

width=device-width：设置视口宽度等于设备的宽度
initial-scale=1.0：初始缩放比例, 1 不缩放
maximum-scale：允许用户缩放到的最大比例
minimum-scale：允许用户缩放到的最小比例
user-scalable：用户是否可以手动缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板文件</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>