【每日知识】视口

最新推荐文章于 2023-07-14 20:20:32 发布

谢豪杰

最新推荐文章于 2023-07-14 20:20:32 发布

阅读量1k

点赞数 2

分类专栏：每日知识文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_46580087/article/details/122875102

版权

每日知识专栏收录该内容

57 篇文章 5 订阅

订阅专栏

今天我们说到视口，视口在响应式设计中是一个非常重要的概念。

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

在移动端浏览器中存在两种视口：

一是可见视口，即设备大小；

二是视窗视口，即网页宽度。

设备屏幕是414pxd 宽度，在浏览器中，414px的屏幕能够显示1200px 的内容。那么，414px 就是可见视口的宽度，而1200px 就是视窗视口的宽度。
为了显示更多的内容，浏览器会通过viewport的默认缩放将网页等比例缩小。

但是为了提高用户体验感，并不是默认的viewport进行展示，而是自定义配置视口的属性，使这个缩小比例更加适当。

在html5中，可以用来配置视口属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口用来约束html尺寸 
    viewport：视口 
    width=device-width：宽度=设备宽度（逻辑分辨率的宽度）
    initial-scale=1.0：缩放
    initial-scale=yes：可以缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

【每日知识】

视口：是用来约束html尺寸的。

viewport：视口

width=device-width：宽度=设备宽度（逻辑分辨率的宽度）

initial-scale=1.0：缩放

initial-scale=yes：可以缩放

谢豪杰

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【每日知识】视口

今天我们说到视口，视口在响应式设计中是一个非常重要的概念。 <meta name="viewport" content="width=device-width, initial-scale=1.0">在移动端浏览器中存在两种视口：一是可见视口，即设备大小；二是视窗视口，即网页宽度。设备屏幕是414pxd 宽度，在浏览器中，414px的屏幕能够显示1200px 的内容。那么，414px 就是可见视口的宽度，而1200px 就是视窗视口的宽度。为了显示更多的内容，浏览器会通过
复制链接

扫一扫