前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >前端开发-视口

前端开发-视口

原创
作者头像
程序员 NEO
发布2023-09-28 22:26:12
发布2023-09-28 22:26:12
1740
举报

视口概述

  • 视口简单理解就是可视区域的大小我们称之为视口
  • 在 PC 端,视口大小就是浏览器窗口可视区域的大小
代码语言:html
复制
<!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>
image-20211212182854564
image-20211212182854564
  • 在移动端, 视口大小并不等于 窗口 大小, 移动端视口宽度被人为定义为了 980
image-20211212182955034
image-20211212182955034

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

代码语言:html
复制
<!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>
image-20211212185124152
image-20211212185124152
image-20211212185207932
image-20211212185207932

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

代码语言:html
复制
<!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>
image-20211212185523186
image-20211212185523186
image-20211212185556887
image-20211212185556887

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

代码语言:html
复制
<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:用户是否可以手动缩放
代码语言:html
复制
<!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>
image-20211212185523186
image-20211212185523186
image-20211212185814733
image-20211212185814733

我正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池和键盘手表

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 视口概述
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档