初學者指南：HTML Viewport
更新日期： 2024 年 10 月 15 日
當你在手機或平板等不同設備上查看網站時，你會注意到有些網站看起來非常適合你的螢幕，而有些網站則顯得過大或過小。
這些差異大多是由於 viewport 的設置決定的。
理解 viewport 對於製作響應式網站（Responsive Web Design）至關重要。
這篇文章將幫助你了解什麼是 viewport，以及如何在 HTML 中設置 viewport，讓網站在不同設備上都能有良好的顯示效果。
什麼是 Viewport？
Viewport 可以理解為網頁在瀏覽器中可見的部分。
它就像是一個窗口，通過這個窗口用戶可以看到網站的內容。
不同的設備有不同大小的 viewport，例如，桌面電腦的 viewport 通常很大，而手機的 viewport 則相對較小。
Viewport 的設置可以幫助我們，控制網頁在各種不同螢幕上的顯示方式。
為什麼 Viewport 很重要？
當一個網站在桌面電腦上顯示時，通常我們不會遇到什麼問題，但如果這個網站同樣的設計在手機上顯示，內容可能會變得過小或過大，這會讓用戶體驗變差。
Viewport 的正確設置可以幫助網站自動調整到不同的設備，讓內容能夠以適合的大小顯示出來，並提高可讀性。
如何設定 Viewport
在 HTML 中，可以使用 <meta> 標籤來設置 viewport。
這個標籤通常會放在 HTML 頁面的 <head> 區域中。最常見的 viewport 設置方式如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">讓我們來解釋這段代碼中的各個部分：
name="viewport"：這表示我們要設置 viewport。content="width=device-width"：這部分設置 viewport 的寬度等於設備的寬度，也就是說，讓網頁的寬度自動匹配設備的螢幕寬度。initial-scale=1.0：這表示頁面在首次加載時的縮放比例為 1.0，也就是原始大小。
例子
假如你有一個沒有設置 viewport 的網站，它在手機上可能顯得非常小，所有的內容都擠在一起，並且需要用戶不停地縮放和滑動。
而加上 viewport 設置後，網站的內容會根據設備的螢幕大小進行自適應調整，變得更加易於閱讀和瀏覽。
Viewport 的屬性解釋
除了 width 和 initial-scale，還有一些其他常見的 viewport 屬性：
width
width=device-width：設定 viewport 的寬度為設備的螢幕寬度。width=數值：你也可以設置一個固定的寬度，例如width=600，表示 viewport 的寬度固定為 600 像素。
initial-scale
initial-scale=1.0：設定頁面首次加載時的縮放比例。initial-scale=0.5：如果設置為0.5，頁面會縮小到原始大小的一半。
maximum-scale 和 minimum-scale
maximum-scale：設定用戶可以將頁面放大的最大比例。minimum-scale：設定用戶可以將頁面縮小的最小比例。
user-scalable
user-scalable=no：禁止用戶縮放頁面。user-scalable=yes：允許用戶縮放頁面。
這些屬性可以幫助你更靈活地控制頁面的顯示效果和用戶體驗。
例如，如果你希望用戶不能對頁面進行縮放，你可以使用 user-scalable=no。
生活案例
想像一下，你在手機上打開一個網站，這個網站看起來像是縮小版的桌面網站，所有內容都擠在一起，非常難以閱讀，這就是沒有正確設置 viewport 的結果。
相反，如果網站正確設置了 viewport，所有內容都會根據手機的螢幕寬度進行調整，文字大小適中，圖片也不會超出螢幕，這樣的網站體驗會更好。
常見錯誤
- 忽略 viewport 設置：這是新手常犯的錯誤，沒有設置 viewport 導致網站在手機上顯示不佳。
- 固定寬度設置：有些人會將 viewport 的寬度設置為固定數值，例如
width=1024，這樣在手機上顯示時，頁面仍然過寬，會讓用戶需要左右滑動才能看到所有內容。 - 不合理的縮放設置：過高或過低的
initial-scale可能導致頁面在某些設備上顯示不正常，影響用戶體驗。
結論
Viewport 是一個控制網站如何在不同設備上顯示的工具，它可以幫助網站自適應不同大小的螢幕，提供更好的用戶體驗。
對於初學者來說，理解並正確設置 viewport 是製作響應式網站的重要一步。
希望這篇文章能幫助你了解 viewport 的作用和設置方法，讓你在製作網站時能夠更好地適應各種不同的設備。
如果有任何問題，或者想要進一步了解如何使用 viewport 來改進你網站的顯示效果，隨時告訴我！
