響應式網頁設計 - 視口

什麼是視口？

視口是使用者在網頁上可見的區域。

視口會隨著裝置的不同而變化，在手機上會比在電腦螢幕上小。

在平板電腦和手機出現之前，網頁只為電腦螢幕設計，網頁通常採用靜態設計和固定大小。

然後，當我們開始使用平板電腦和手機上網時，固定大小的網頁太大了，無法適應視口。為了解決這個問題，這些裝置上的瀏覽器會將整個網頁縮小以適應螢幕。

這並不完美！！但這是一種快速的解決方案。

設定視口

HTML5 引入了一種方法，讓網頁設計師透過 `` 標籤來控制視口。

您應該在所有網頁中包含以下 `` 視口元素：

這會給瀏覽器指令，告知如何控制頁面的尺寸和縮放。

width=device-width 部分將頁面的寬度設定為與裝置的螢幕寬度一致（這將因裝置而異）。

initial-scale=1.0 部分設定了瀏覽器首次載入頁面時的初始縮放級別。

這是一個沒有視口 meta 標籤的網頁示例，以及同一個網頁有視口 meta 標籤的示例。

沒有視口 meta 標籤

有視口 meta 標籤

內容適應視口

使用者習慣於在桌面和移動裝置上垂直滾動網頁 - 但不是水平滾動！

因此，如果使用者被迫水平滾動或縮小以檢視整個網頁，將導致糟糕的使用者體驗。

一些需要遵循的附加規則

1. 請勿使用大的固定寬度元素 - 例如，如果一張圖片顯示時寬度大於視口，則可能導致視口水平滾動。請記住將此內容調整為適合視口寬度。

2. 請勿讓內容依賴於特定的視口寬度才能正常顯示 - 由於裝置之間的螢幕尺寸和 CSS 畫素寬度差異很大，內容不應依賴於特定的視口寬度才能正常顯示。

3. 使用 CSS 媒體查詢為小螢幕和大螢幕應用不同的樣式 - 為頁面元素設定大的絕對 CSS 寬度將導致該元素在較小的裝置上對視口來說過寬。相反，可以考慮使用相對寬度值，例如 width: 100%。此外，在使用大的絕對定位值時要小心。它可能導致元素在小型裝置上超出視口。