HTML 视口

17 Mar 2025 | 5 分钟阅读

HTML 视口是 HTML 页面中用于响应式网页的 meta 标签。它包含带标签及其参数的 head 部分。我们可以根据响应式页面设置宽度和其他设计。

描述视口

访问者可以看到内容的网页部分在浏览器中称为 HTML 视口。视口的大小会根据设备或浏览器的屏幕而变化。视口为智能手机或平板电脑创建响应式功能，而笔记本电脑的视口更大。

在视口之前，如果网站可以在小屏幕上看到该功能，则内容看起来不清晰或不响应。创建一个响应式标签以调整所有类型设备及其浏览器的视口。Apple Inc. 是最初为 iOS Safari 实现视口 meta 标签的公司。

语法

以下语法显示了页面的 HTML 视口标签。

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

描述

语法参数是许多 Web 应用程序中发现的标准视口配置。视口标签用于移动友好型网站。
视口的大小使用 width 属性控制，用于响应式应用程序。
我们可以使用指定的值，例如“width=600”，表示 CSS 像素。在这里，它设置了一个独特的值，例如“width=device-width”。宽度值是设备宽度的 100% 比例，以 CSS 像素表示。
当网页首次加载时，设备的缩放级别由 initial-scale 属性控制。

参数

以下 HTML 视口需要以下参数。

Width：屏幕或设备的 HTML 视口宽度。
Height：屏幕或设备的 HTML 视口高度。
Initial-scale：页面首次加载时所需的初始缩放比例或缩放页面。最小缩放：用户可以以最小缩放级别缩放页面。
Maximum-scale：用户可以以最大缩放级别缩放页面。
User-scalable：该标志允许页面或设备放大或缩小。用户可缩放参数需要是或否值。

示例

以下示例显示了 HTML 视口及其参数。

示例 1

以下示例显示了主要的 HTML 视口及其值。在这里，我们只能设置用户要求的宽度。

<!DOCTYPE html>
<html>
<head>
<title> Html viewport </title>
<meta charset = "utf-8" name = "viewport" content = "width=980" />
<style>
.class1 {
font-size:30px;
font-weight: bold;
text-align: center;
color: red;
}
.class2 {
font-size:22px;
text-align:center;
font-weight:bold;
}
b {
text-align:justify;
color:blue;
}
</style>
</head>
<body>
<div class = "class1">
Html Viewport with only width 
</div>
<div class = "class2">
A Javatpoint website helps to learn computer science technologies
</div>
<b>
The HTML viewport is the Meta tag in the HTML page for the responsive web page.
The HTML viewport contains the head section with the tag and its parameters.
We can set the width and other designs as per the responsive page.
</b>
</body>
</html>

输出

输出显示了根据视口和响应式设备的网页。

示例 2

以下示例显示了主要的 HTML 视口及其值。在这里，我们可以使用带有标准宽度和初始比例参数的视口。

<!DOCTYPE html>
<html>
<head>
<title> Html viewport </title>
<meta charset = "utf-8" name = "viewport" content = "width=device-width, initial-scale=1.0" />
<style>
.class1 {
font-size:30px;
font-weight:bold;
text-align:center;
color:red;
}
.class2 {
font-size:22px;
text-align:center;
font-weight:bold;
}
p {
text-align:justify;
color:blue;
}
</style>
</head>
<body>
<div class = "class1">
Html Viewport
</div>
<div class = "class2">
A Javatpoint website helps to learn computer science technologies
</div>
<p>
The section of a web page where a visitor can see the content is called the HTML viewport in a browser.
The size of the viewport changes according to the screens of the devices or browsers.
The viewport creates a responsive function for a smartphone or tablet, and a laptop's viewport is larger.
</p>
<p>
The HTML viewport is the Meta tag in the HTML page for the responsive web page.
The HTML viewport contains the head section with the tag and its parameters.
We can set the width and other designs as per the responsive page.
</p>
</body>
</html>

输出

输出显示了根据视口和响应式设备的网页。

示例 3

以下示例显示了带有指定值的主要 HTML 视口。

<!DOCTYPE html>
<html>
<head>
<title> Html viewport </title>
<meta charset = "utf-8" name = "viewport" content = "width=250, initial-scale=1.0" />
<style>
.class1 {
font-size:30px;
font-weight:bold;
text-align:center;
color:red;
}
.class2 {
font-size:22px;
text-align:center;
font-weight:bold;
}
p {
text-align:justify;
color:blue;
}
</style>
</head>
<body>
<div class = "class1">
Html Viewport with specified width
</div>
<div class = "class2">
A Javatpoint website helps to learn computer science technologies
</div>
<p>
The HTML viewport is the Meta tag in the HTML page for the responsive web page.
The HTML viewport contains the head section with the tag and its parameters.
We can set the width and other designs as per the responsive page.
</p>
</body>
</html>

输出

输出显示了根据视口和响应式设备的网页。

示例 4

以下示例显示了主要的 HTML 视口及其值。在这里，我们可以使用视口标签设置用户可缩放的值。

<!DOCTYPE html>
<html>
<head>
<title> Html viewport </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0" />
<style>
.class1 {
font-size:30px;
font-weight:bold;
text-align:center;
color:red;
}
.class2 {
font-size:22px;
text-align:center;
font-weight:bold;
}
p {
text-align:justify;
color:blue;
}
</style>
</head>
<body>
<div class = "class1">
Html Viewport with the user-scalable
</div>
<div class = "class2">
A Javatpoint website helps to learn computer science technologies
</div>
<p>
The section of a web page where a visitor can see the content is called the HTML viewport in a browser.
The size of the viewport changes according to the screens of the devices or browsers.
The viewport creates a responsive function for a smartphone or tablet, and a laptop's viewport is larger.
</p>
</body>
</html>

输出

输出显示了根据视口和响应式设备的网页。

结论

根据设备和屏幕，视口对于所有基于 Web 的应用程序都至关重要。它根据设备宽度和基于 Web 的页面的初始显示进行操作。

下一个主题HTML 元数据包含在哪个部分？

HTML 视口

描述视口

语法

描述

参数

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 视口

描述视口

语法

描述

参数

示例

结论

相关帖子

HTML 5 spellcheck 属性

如何在 HTML 中添加社交媒体图标

HTML 转 Markdown Python

Web 2.0

HTML5 签名板转图片

HTML 仅输入数字

HTML MDN

HTML 美化器

HTML 日期选择器

HTML 中的 Align 标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器