我的視窗大小是多少？視窗尺寸工具

什麼是視窗大小？

您的視窗大小是瀏覽器視窗內網頁的可見區域——HTML 排版與 CSS 樣式實際渲染的區域。當您開啟網站時，瀏覽器會計算該可見畫布的寬度與高度，並以這些尺寸套用 CSS 規則、觸發媒體查詢，以及定位頁面上的每個元素。

視窗大小以 CSS 像素而非實體螢幕像素為單位。這個差異非常重要：CSS 像素是一種邏輯單位，無論顯示硬體每英吋封裝多少實體點，都能保持一致。標準桌機螢幕上，一個 CSS 像素等於一個實體像素；但在現代高密度智慧型手機上，一個 CSS 像素可能對應 9 個以上的實體像素。正因如此，高解析度螢幕才能以正常、可閱讀的尺寸顯示網頁內容。

視窗大小與螢幕解析度——了解兩者差異

螢幕解析度是您顯示面板的原始像素數——一個由製造商設定的硬體數值。一支手機的原生解析度可能是 1080 × 2400 實體像素。視窗大小則是瀏覽器在作業系統套用縮放係數（即裝置像素比 DPR）之後實際處理的尺寸。

計算公式為：視窗寬度 = 螢幕解析度 ÷ 裝置像素比。一支螢幕寬 1080px、DPR 為 2.625 的手機，其視窗寬度約為 412 個 CSS 像素。您的 CSS 媒體查詢看到的是 412px——而非 1080px。這也是為什麼兩支螢幕解析度差異很大的手機，在瀏覽器排版上看起來卻完全相同。

將視窗大小與螢幕解析度混淆，是響應式網頁設計中最常見的錯誤之一。若您以硬體解析度而非視窗像素撰寫 CSS 斷點，排版在真實裝置上將會出錯。上方工具顯示的數值，才是 CSS 真正使用的尺寸。

什麼是裝置像素比（DPR）？為什麼它會影響視窗？

裝置像素比是作業系統用來將實體螢幕像素對應至 CSS 像素的倍數。在一般桌機螢幕上，DPR 為 1.0——一個 CSS 像素等於一個實體像素。在現代智慧型手機與高解析度筆電上，DPR 值為 2.0、3.0 或 3.5 的情況相當普遍。

DPR 越高，裝置渲染每個 CSS 像素時使用的實體像素格就越大——3× DPR 會使用 3×3 共 9 個實體像素來呈現一個 CSS 像素。其結果是文字更銳利、圖像更清晰，而不會改變邏輯排版尺寸。Apple 的 Retina 顯示器、Samsung 的 AMOLED 面板，以及 Google 的高密度螢幕，都藉由提高 DPR 來提升視覺品質，同時讓網頁內容維持舒適的閱讀尺寸。

您的瀏覽器透過 JavaScript 屬性 window.devicePixelRatio 提供目前的 DPR 值。上方工具在讀取視窗尺寸的同時，也會讀取此數值，讓您同時掌握 CSS 像素畫布與底層像素密度。

如何用 JavaScript 讀取視窗大小

JavaScript 提供多個屬性用於讀取視窗與螢幕尺寸。了解該使用哪個屬性——以及哪個應避免使用——可防止常見的排版錯誤：

window.innerWidth / window.innerHeight——以 CSS 像素表示的目前視窗大小，包含捲動軸寬度。這是最可靠的響應式排版判斷依據，與 CSS 媒體查詢測試的數值相同。
document.documentElement.clientWidth / clientHeight——不含捲動軸的視窗大小，適用於需要精確計算捲動軸重疊的排版場合。
window.devicePixelRatio——目前的 DPR 值，可用於動態提供高解析度圖片，或在 <canvas> 元素上繪製清晰圖形。
screen.width / screen.height——實體螢幕解析度。請勿將其用於排版判斷——這些數值反映的是硬體像素，而非 CSS 像素，在高密度螢幕上會產生錯誤結果。

本頁頂部的工具會即時讀取 window.innerWidth、window.innerHeight 及 window.devicePixelRatio，並在您調整瀏覽器視窗大小時自動更新，提供您目前視窗的即時精確快照。

2025 年常見視窗大小——手機、平板與桌機

雖然每部裝置都有其精確尺寸，但網路流量普遍集中於幾組可預測的視窗寬度。了解這些常見斷點，有助於設計出適用於各種真實裝置的排版。

360px——使用最廣泛的 Android 視窗寬度，出現於 Samsung Galaxy S 系列、Galaxy A 系列及許多中階 Android 手機。
390px——iPhone 15、iPhone 14 及 iPhone 13 直向模式。
412px——Google Pixel 系列手機、Samsung Galaxy A54/A55 及許多 OnePlus 裝置。
428px——iPhone 13 Pro Max、iPhone 14 Plus。
768px——經典 iPad 直向視窗，仍是 CSS 框架中最常用的平板斷點。
820px——iPad Air 11" M2 直向模式。
834px——iPad Pro 11" M4 直向模式。
1024px——iPad Pro 13" 直向模式；也是常見的桌機最小斷點。
1280px——MacBook Air 13" M4 預設視窗；許多較小筆電螢幕。
1440px——MacBook Air 15" M4 及大多數 DPR 1.0 的 1440p 桌機螢幕。
1512px——MacBook Pro 14" M4 預設視窗。
1920px——DPR 1.0 的全高清桌機螢幕（視窗大小等於螢幕解析度）。

瀏覽完整的裝置視窗大小對照表，查詢任何手機、平板或筆電的精確 CSS 尺寸。

根據視窗大小撰寫 CSS 媒體查詢

一旦確認目標裝置的視窗寬度，撰寫精確的 CSS 媒體查詢便相當直觀。媒體查詢測試的永遠是視窗 CSS 像素——而非硬體解析度。以下是涵蓋最常見情境的實用範例：

/* 行動裝置——最寬 480px */
@media only screen and (max-width: 480px) { /* 樣式 */ }

/* 平板直向模式——768px 至 1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) { /* 樣式 */ }

/* 手機橫向模式 */
@media only screen and (orientation: landscape) and (max-width: 900px) { /* 樣式 */ }

/* Retina 及高密度顯示器（DPR ≥ 2） */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) { /* 高解析度圖片樣式 */ }

如需 Retina 品質圖片，請在 <img> 標籤上使用 srcset，或在 CSS 中使用 image-set()，僅向支援高解析度的裝置提供 2× 及 3× 圖片資源。向標準密度螢幕提供大圖會浪費頻寬；向高密度螢幕提供標準圖片則會在清晰的 Retina 顯示器上顯得模糊。

直向與橫向視窗——旋轉如何改變尺寸

在行動裝置上，旋轉螢幕會交換視窗的寬度與高度。一支直向視窗為 360 × 780 的手機，橫向時約為 780 × 360。瀏覽器會觸發 resize 事件，重新評估所有媒體查詢，並重新渲染排版以適應新方向。

許多在直向模式下運作良好的排版，在橫向時會因高度不足而導致內容溢出或收合。請務必測試兩種方向——尤其是導覽選單、主視覺圖片、固定標題列及模態覆蓋層。您可以在 CSS 中使用 orientation 媒體特性偵測方向變化，或在 JavaScript 中監聽 resize 事件或 screen.orientation.onchange。

旋轉裝置後，使用上方工具的「重新整理」按鈕重新讀取視窗，即可看到各方向的精確尺寸。

為什麼了解自己的視窗大小很重要

了解目前的視窗大小在多種實際情境下都非常有用。如果某個網站的排版在您的裝置上顯示異常，查看視窗寬度有助於了解目前啟用的是哪個 CSS 斷點，以及排版為何如此顯示。如果您是開發者，且客戶回報其裝置上出現顯示問題，了解對方的視窗尺寸通常是重現並修復問題的第一步。

設計師使用視窗大小來驗證 UI 線框是否正確對應真實裝置的限制。以 375px 寬度設計的介面在 360px 寬的手機上看起來會有所不同——即使兩者都被歸類為「行動裝置」。QA 測試人員在跨瀏覽器測試時，會以即時視窗讀數確認斷點是否在預期寬度啟用。

本頁工具可即時精確讀取您瀏覽器目前的 CSS 畫布——無需擴充功能，無需開發者工具。將網址分享給客戶或同事，請他們在自己的裝置上開啟，即可立即比較不同硬體的視窗尺寸。

免責聲明：視窗與螢幕解析度資料因裝置、作業系統版本及瀏覽器而異。顯示數值基於測量當時瀏覽器回報的屬性。如發現任何不準確之處，請來信：[email protected]

我的視窗大小是多少？