開啟螢幕解析度檢查工具,比較瀏覽器所回報的 CSS 螢幕寬度、可用區域、視窗、整個視窗和裝置像素比值,然後調整正確的設定——作業系統縮放、瀏覽器縮放或視窗所在的不同顯示器——直到這些數字符合您正在作業的工作區。一個看起來正常的螢幕取決於三件事對齊:工作區的實體像素網格、作業系統的顯示器縮放比例,以及瀏覽器所回報的座標空間。當其中一項偏離時,圖示會變大、文字看起來模糊,或網頁以看起來擠壓或拉伸的版面呈現。瀏覽器無法告訴您工作區的標示解析度,但能精確告訴您目前正在繪製的座標空間,而該回報是恢復正常狀態最乾淨的起點。將此頁面視為快速的診斷工具,而非修復方式——修復發生在作業系統或瀏覽器的縮放控制中,而檢查工具的存在是為了確認所做的變更確實移動了您預期要移動的值。

how do i get my screen resolution back to normal
how do i get my screen resolution back to normal

此瀏覽器中「正常」的螢幕解析度代表什麼

「正常」是相對的。13 吋筆電工作區和 27 吋外接螢幕對其擁有者而言都是「正常」的,但它們的 CSS 像素數和裝置像素比截然不同。瀏覽器不知道您的桌子有多寬、不知道工作區的原生可定址像素數,也不知道您距離螢幕多遠。它只知道作業系統透過標準的視窗和螢幕物件交給它的座標空間。該座標空間有四個重要的區域:

  • CSS 螢幕——瀏覽器被告知可以繪製的完整座標矩形。
  • 可用螢幕——該矩形減去任何阻擋內容的作業系統區域,例如工作列或功能表列。
  • 視窗——瀏覽器視窗內頁面版面可用的矩形空間。
  • 整個視窗——完整的瀏覽器視窗,包括標題列、分頁、側邊面板和介面元件。

當這些項目中的任何一個意外縮減時,頁面會以較小的尺寸呈現。當裝置像素比改變時,文字和影像會變得更銳利或更模糊。了解是哪一項變動了,是讓一切恢復正常的一半工作。

螢幕為何會偏離正常

有三個因素容易讓螢幕偏離其基準。首先,作業系統縮放被切換——Windows 使用者經常在工作區感覺太小時將縮放滑桿從 100% 調整到 125% 或 150%,這會改變系統所回報的 CSS 像素數量。其次,瀏覽器縮放會獨立於作業系統縮放而變更,而 110% 的瀏覽器縮放不會像作業系統縮放那樣反映在裝置像素比中。第三,視窗或顯示器移動會改變環境:將瀏覽器拖曳到具有不同縮放比例的其他螢幕、進入或離開全螢幕、連接或拔除外接顯示器,或啟動遠端桌面工作階段,這些都會重寫瀏覽器所看到的座標空間。某些瀏覽器中的隱私降低模式也會回報較低精確度的螢幕尺寸,這是數字可能看起來「不對」但工作區實際上並無異常的另一個原因。

讀取瀏覽器目前所回報的內容

在進行任何變更之前,請先擷取目前的狀態。螢幕解析度檢查工具會在單一頁面上顯示瀏覽器的 CSS 螢幕、可用螢幕、視窗、整個視窗、裝置像素比、預估裝置像素尺寸,以及直向/橫向/正方形方向標籤。每個值都有明確標示,因此您無需猜測某個數字指的是工作區、視窗還是版面區域。不會上傳任何數值、不需要帳號,且頁面不會儲存任何資料——關閉分頁就會清除回報。如果工作區看起來模糊或異常,而您想確認在調整設定之前這不是亮點或壞點所造成,可以同時使用壞點測試快速掃描以排除該可能性。

逐步使用螢幕解析度檢查工具

  1. 在您要檢查的瀏覽器視窗中開啟螢幕解析度檢查工具。
  2. 比較四個尺寸值——CSS 螢幕、可用螢幕、視窗和整個視窗——並注意視窗是否明顯小於螢幕,當瀏覽器具有分頁、側邊面板或工具列時,這是正常現象。
  3. 讀取裝置像素比及其正下方的預估裝置像素乘積,並記住該乘積是標示為預估值,而非工作區的原生像素數。
  4. 調整瀏覽器視窗大小或將其移至不同的螢幕,然後查看視窗和整個視窗值是否已更新。
  5. 選取複製報表,以將每個可見欄位以純文字形式放置到剪貼簿,以便您將快照貼到記事、電子郵件或聊天訊息中。
  6. 在每次變更後重複複製——瀏覽器縮放、作業系統縮放、全螢幕或螢幕切換——以便您擁有前後對比的配對。

頁面上每個值的含義

該頁面所呈現的數字具有非常明確的定義。CSS 螢幕來自 screen.width 和 screen.height,描述瀏覽器被告知可以使用的座標空間,而非工作區的標示解析度。可用螢幕來自 screen.availWidth 和 screen.availHeight,可能會排除作業系統介面區域,例如工作列或功能表列。視窗是 window.innerWidth 和 window.innerHeight——瀏覽器內部可用的版面矩形——而整個視窗是 window.outerWidth 和 window.outerHeight(當瀏覽器提供正值時),僅在外部值不可用時才會退而使用視窗。裝置像素比是 window.devicePixelRatio,而預估的裝置像素尺寸則是將 CSS 螢幕乘以該比例後四捨五入為整數的值。

瀏覽器值其測量內容常見的變更原因
CSS 螢幕瀏覽器可繪製的完整座標矩形切換螢幕或變更作業系統縮放
可用螢幕螢幕減去工作列、功能表或停駐區域隱藏或顯示工作列、停駐工具
視窗瀏覽器內部的版面區域調整視窗大小、開啟開發人員工具、側邊面板
整個視窗包括介面元件的完整瀏覽器視窗調整視窗大小或在顯示器之間移動
裝置像素比從 CSS 像素到後端緩衝區的乘數作業系統縮放滑桿、瀏覽器縮放、螢幕切換
預估裝置像素CSS 螢幕 × 裝置像素比(四捨五入)比例或 CSS 螢幕的任何變更
方向標籤回報的 CSS 寬度和高度比較旋轉視窗、切換到直向螢幕

為了將乘積視為計算範例:在 CSS 螢幕為 1440 × 900 且裝置像素比為 2 的情況下,預估裝置像素尺寸為 round(1440 × 2) × round(900 × 2) = 2880 × 1800。該數字有助於理解 CSS 座標與後端緩衝區之間的關係,但刻意標示為預估值,因為顯示器縮放、瀏覽器縮放、作業系統縮放、合成器行為、螢幕擷圖、遠端桌面、多個工作區以及隱私降低都可能使該乘積無法對應到實體工作區的原生可定址像素。

選擇正確的旋鈕以恢復正常顯示

修正方式取決於哪個值變動了。如果視窗縮減但 CSS 螢幕維持不變,則瀏覽器視窗本身較小、側邊面板已開啟、開發人員工具已停駐,或瀏覽器處於非最大化視窗中——請調整視窗大小或將其最大化。如果 CSS 螢幕變更但工作區未變動,則作業系統顯示設定已變更:還原作業系統縮放滑桿、重新連接先前的螢幕,或離開全螢幕。如果變更後文字看起來模糊,請查看裝置像素比:在高解析度工作區上值為 1 通常表示作業系統縮放已停用或設定過低,而像 1.25 或 1.5 這類小數值表示縮放已啟用,且乘積仍會四捨五入為整數。如果方向標籤在橫向工作區上翻轉為直向,則視窗已被調整為又高又窄的矩形——請將其拖寬。方向標籤是兩個回報的 CSS 數字的比較,而非加速度計的讀數,因此無法描述鉸接、折疊、投影或鏡像的硬體配置。

對於您嘗試的每項變更,請使用複製報表擷取前後的數字,以保持比較的準確性。在同一個螢幕上開啟新分頁,再次複製報表,並確認這些值是否如您預期般變動。如果在完成所有這些步驟後工作區看起來仍然不正常——色彩偏差、卡住的亮點、從未移動的水平線——則問題已不再是座標空間,下一步是使用專門的壞點測試或工作區製造商提供的硬體診斷工具。螢幕解析度檢查工具刻意保持範圍狹窄:它驗證正數有限的瀏覽器值、計算以公開方式說明的乘積、在視窗調整大小時更新,並區分 CSS 座標、預估裝置像素和無法觀察的實體尺寸。這種狹窄的合約正是它在螢幕看起來不再正常時成為值得信賴的起點的原因。

若要深入了解,請參閱如何在任何瀏覽器中檢查螢幕解析度

若要深入了解,請參閱如何在 iPad 上檢查螢幕解析度