用于响应式网页设计的 HTML Viewport 元标记

htmlweb developmentfront end technology更新于 2024/5/21 0:44:17

HTML Viewport 元标记用于创建响应式网站。这样网页就可以根据视口调整其宽度。

语法

以下是语法 −

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

视口元标记的属性

属性	说明
width	指定设备的虚拟视口宽度。
height	指定设备的虚拟视口高度。
initial-scale	指定页面首次访问时的缩放级别。
minimum-scale	指定页面首次访问时的最小缩放级别。用户可以缩放页面的级别。
maximum-scale	指定用户可以缩放页面的最大缩放级别。
user-scalable	指定用户是否可以放大或缩小页面。

示例

让我们看一个 HTML 视口元标记的示例 −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
      padding: 20px;
   }
</style>
</head>
<body>
<h1>HTML Viewport meta tag Demo</h1>
<p>
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
</p>
<p>
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
</p>
</body>
</html>