當在 HTML 中使用 <meta> 標記時，可以指定一些關於瀏覽器視窗的設定，其中最常見的就是使用 viewport 標記。viewport 標記通常用於提供關於頁面在移動設備上顯示的方式的指示。以下是一些在 HTML 中設定和使用 viewport 標記的範例：
viewport 標記html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Viewport Example</title>
</head>
<body>
<!-- 內容 -->
</body>
</html>
在這個例子中，viewport 標記告訴瀏覽器，頁面的寬度應該等於設備的寬度，並且初始縮放比例應該為 1.0。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Disable Zoom Example</title>
</head>
<body>
<!-- 內容 -->
</body>
</html>
在這個例子中，user-scalable=no 選項阻止使用者手動縮放頁面。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=600">
<title>Fixed Width Example</title>
</head>
<body>
<!-- 內容 -->
</body>
</html>
在這個例子中，width=600 指定了頁面的寬度應該固定為 600 像素。
html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Responsive Design Example</title>
<style>
/* 添加一些適應不同裝置的樣式 */
body {
font-size: 16px;
}
@media only screen and (max-width: 600px) {
/* 在小型裝置上的樣式 */
body {
font-size: 14px;
}
}
</style>
</head>
<body>
<!-- 內容 -->
</body>
</html>
在這個例子中，使用了媒體查詢（media query）和CSS，以確保在小型裝置上顯示更適合的樣式。
這些範例提供了一些常見的 viewport 標記用法，但具體的使用方式可能取決於您的項目需求和設計目標。