資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法學用於響應式 Web 設計的 HTML 視窗元標記
HTML 視窗元標記用於建立響應式網站。因此，網頁可以根據視窗調整其寬度。
語法
以下是語法 −
< 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>輸出
現在嘗試調整瀏覽器視窗大小，觀察頁面在較小裝置上的顯示方式。
更新於：16-Feb-2021
3K+ 瀏覽
廣告