網站放大後內容會跑版嗎？檢查縮放、換行與操作空間

從代表頁挑選、逐級放大，到核對裁切、水平捲動與控制項，建立可重現的網站檢查流程。

把網站放大後，真正要確認的不是畫面「看起來還在」，而是讀者能否找到資訊、讀完文字並完成操作。首頁完整不代表長表單、比較內容或文章也能適應；縮放時文字變大，欄位、圖片和固定區塊可用的空間也會改變。本文聚焦文字重排、水平捲動與操作空間，不評估選單架構。先選代表頁、記錄基準，再逐級放大，最後用相同任務重測。檢查時把正常觀看與放大閱讀分開記錄，才能比較差異。

挑選長短不同頁面

不要只拿首頁做樣本：縮放壓力來自內容長度、欄位數量和固定版型，應各挑一頁短、一頁長，再加一頁有明確任務的頁面。短頁可選品牌或活動介紹，確認標題、段落、圖片與按鈕；長頁選文章或服務說明，留意多層標題、引用、清單、長字詞與文末連結；任務頁選聯絡表單或預約說明，觀察標籤、輸入框、錯誤提示與送出區域。若網站有產品列表或比較表，再納入一頁含多欄資料的頁面，避免只測文字文章而漏掉表格。挑選時先寫下使用者要完成的事，例如「讀完服務條件並找到詢問入口」，讓每張截圖都能對應任務是否完成，而非只記版面美觀。樣本不求把所有網址逐一走完，先覆蓋純文字、圖文交錯、多欄比較、表單與固定側欄等不同結構。若一頁同時有幾種結構，也記下它代表的壓力點，免得後續把問題歸成「整站跑版」。同一模板被多頁共用時，先測代表頁，再抽查內容最長、標題最長或圖片最寬的一篇，因為內容差異也會改變換行。開始前在未縮放狀態確認主要資訊和控制項正常，記下裝置、方向、瀏覽器與100%基準；測試時不要同時改字級、視窗大小和方向。短頁問題通常容易定位，長頁記下出錯標題或段落，任務頁則記錄入口到完成的步驟。這樣能先判斷問題出在特定內容、單一元件，還是共用版型。

逐級放大文字畫面

以讀者平常使用的瀏覽器和裝置為起點，先在100%基準檢查，再逐級設定125%、150%、200%等方便重現的比例；這些是測試點，不代表唯一合格標準。每次只更改縮放，不同步調整視窗寬度，觀察文字是否變大、行長是否縮短、欄位是否向下排列。若使用手機，分開記錄瀏覽器頁面縮放和手勢放大：兩者可能改變不同的可視區域，不能只留下「放大過」的描述。每個比例先看頁首標題、正文第一段、頁面中段和主要行動區，再往下捲到頁尾；長頁只截首屏很容易錯過後段溢出。留意字體放大後行距、段落間距、按鈕文字與表單說明是否仍清楚；文字不必維持原來一行幾字，重要的是內容能自然重排且不互相遮住。可用一篇帶有長標題和列表的文章做例子：100%時記錄標題行數，200%時再看標題是否完整、列表項目有否被裁切，以及下一段是否被浮動元件蓋住。若比例由瀏覽器控制，重設回100%後再開始下一回合，避免上一輪殘留狀態影響比較。若網站另提供文字大小控制，也要獨立測試並記錄操作方式，不要把它與瀏覽器縮放混為一談。每次改一級都用相同檢查順序，並在筆記中寫明設定值、頁面位置和可見結果；遇到問題先停在該級保存畫面，再繼續測下一級，才不會失去可重現的線索。為避免把瀏覽器設定和網站版面混在一起，同一台電腦可先只放大頁面比例，另開一輪維持100%而縮窄視窗；兩輪畫面並列，就能看出問題偏向字級變大或可用寬度減少。若使用手機系統的字體放大，再列為獨立條件，不與手勢縮放合併。

檢查內容是否被裁切

放大後沿著頁面由左至右、由上至下檢查是否有文字、圖片或控制項超出可視範圍。先看標題尾字、段落末行、圖片邊緣、卡片內文、表格欄位與頁尾，再試著水平移動畫面；若整個頁面必須左右拖動才能讀完一行，記錄出現位置和縮放比例。局部元件若本來需要橫向瀏覽，例如資料表，可註明它自己的捲動區，確認讀者能發現並使用；不要把它和整個頁面被撐寬混成同一問題。檢查固定在視窗邊緣的提示、聊天泡泡或底部按鈕，確定它們沒有蓋住正文、欄位提示或下一步入口。圖片若超出容器，記下是圖片本身、外框還是旁邊文字造成；不要只裁掉圖片來掩蓋問題。舉一個明確標示為假設的例子：某比較頁在150%時，第三欄最右側的方案說明消失，整頁底部出現水平捲軸；記錄後先確認捲動條屬於整頁還是表格，再追到是哪一欄的固定寬度把版面撐開。修正判斷要回到閱讀任務：若讀者看不到完整句子、欄位名稱或操作結果，就算仍可左右拖動，也要列為阻礙。若只有一張圖或一個長網址超出，單獨標明內容位置，避免誤判所有頁面都失效。截圖同時保留整頁和問題局部，附上當下比例和視窗寬度；「右邊被切掉」不夠精確，寫出被切掉的標籤或句子，才能驗證修正是否真的恢復資訊。在每個級距都可從頁首一路巡查到頁尾，不要只按最右側試拖一下就結案。留意頁面底部捲軸和元件內捲動位置，標出哪一處需要移動、移動後能否讀完，讓接手者分清捲動是元件本身的操作，還是版面沒有重排造成。

確認控制項仍可操作

把控制項當作要完成的任務來操作，不能只看它還在畫面上。逐一測試文字連結、按鈕、輸入欄位、選擇項目與錯誤提示；在放大和窄畫面下確認名稱看得見、點擊後有反應，並且反應結果不會被遮住。用鍵盤操作時，依序移到互動項目，觀察焦點是否可辨認、順序是否合理，放大後焦點框是否被固定區塊蓋住；以觸控操作時，確認按鈕周圍留有足夠空間，不會一按就誤觸旁邊項目。若表單欄位放大後標籤與輸入框分離，記下使用者是否仍能判斷要填什麼；若錯誤文字出現在視窗外，也記下是否能找到並修正欄位。以「送出詢問」為例，使用測試資料從第一欄填到確認提示，分別用鍵盤和觸控走一次，觀察焦點、按鈕文字、錯誤訊息與完成狀態；不要用真實客戶資料，也不要把測試送到正式收件流程。這篇只檢查放大後控制項是否可見、可辨認、可操作，不評估導覽選單的層級或資訊架構。若控制項被迫擠在一起，先記錄最小可用空間和相鄰項目，再辨認是文字換行、欄寬、固定高度或覆蓋層造成。合格的判準不是外觀和100%完全相同，而是使用者知道目前焦點在哪、下一步要做什麼，操作後也看得到結果；任何一步需要猜測或反覆點按，都應保留重現步驟。連續操作比單次點擊更能暴露空間問題：填完一欄後前往下一欄、讀取提示、修正內容，再回到主要按鈕；確認畫面會跟著焦點移動，而不是讓使用者自己找回位置。若互動項目暫時移出視窗，先確認能否自然捲到，再判斷換行、欄高或固定區塊是否讓它難以觸及。

記錄裝置與重現步驟

缺少環境資料的截圖很難交給設計或工程同事重現，因此每筆紀錄都要包含網址或頁面識別、作業系統與裝置、瀏覽器版本、視窗寬高、方向、縮放值、發生位置，以及操作前後的結果。再寫清楚起始狀態和步驟，例如「開啟聯絡頁、設為150%、捲至第二個欄位、按Tab兩次」，不要只寫「手機放大後按鈕怪怪的」。附未縮放基準圖和出錯畫面，註明比例。下表可直接當紀錄欄位使用，先保存原始描述，再另加推測原因，避免把猜測當成已證實根因。

請把裝置視窗實際寬度和高度以像素記錄，因為瀏覽器常不是全螢幕，單寫「桌機」仍不足以重現。手機則記下型號或可辨識的尺寸類別、橫直方向，以及頁面是否曾手勢放大。若無法判斷瀏覽器版本，可由設定頁查閱，或抄錄系統顯示的完整名稱；不要以「最新版」代替。現象描述只寫看見或操作得到的事，例如「欄位標籤被底部固定按鈕遮住」；至於「固定高度設太小」則放在待查原因欄。截圖檔名可用頁面簡稱、比例和序號，例如「聯絡頁-150-01」，並搭配紀錄編號；一個問題一筆，避免把不同瀏覽器的現象合成單一案例。對外分享前遮掉姓名、電話、地址等真實資料；若測試連結需要登入，另附安全可用的測試方式，不要把密碼截進圖裡。接手者依步驟重現後，寫回「可重現」或「未重現」及觀察到的差異，確認雙方討論的是同一個畫面。

修正後重測關鍵頁

修正後要回到造成問題的同一頁、裝置、方向和縮放值，照原步驟重跑，並把結果與修正前紀錄逐項核對。先確認原先被裁掉的內容完整出現、整頁不再被無意撐寬、固定元件不遮正文，控制項也能以原本方式操作；接著用100%基準和其他代表比例檢查，避免只在單一尺寸修好、另一級又重疊。若改的是共用版型，至少重測短頁、長頁、任務頁及使用相同元件的第二頁；若改的是單一內容，則抽查同模板中標題或文字較長的頁面。以假設的聯絡表單為例，修正欄寬後，重新用測試資料填寫、觸發錯誤提示、修正欄位並確認完成訊息可見；同時再檢查相鄰欄位沒有因換行而錯位。每次修正後更新紀錄中的實際結果、仍待處理的位置與負責人，不要沿用舊截圖宣稱通過。若原問題消失但操作任務仍卡住，保留為另一筆缺陷，不用「版面已修」替代「流程可完成」。如果重新測仍未通過，先保留原始紀錄，確認同模板其他頁是否也出現，再分辨是內容太寬、容器、固定定位或互動狀態造成。可評估讓文字換行、欄位隨容器伸縮，或把多欄內容改成逐項閱讀；選擇不改變資訊含義的最小調整。對每項改動寫下可觀察條件，例如「第二欄標籤在200%仍完整顯示」或「焦點到送出按鈕時能看見按鈕與提示」。也要回頭核對原先記錄的裁切和水平捲動，逐項確認都已排除。最後依照使用頻率和任務重要性，排定下一批要測的頁面；先把三個代表頁的網址、縮放級距與重現步驟交給負責人，並從 ZhenheAI 首頁 了解品牌目前資訊。