Divi 畫布縮成一小塊，頁面卻仍是桌面排列，通常要先分清你改的是 Zoom，還是 Canvas 寬度。Zoom 調整編輯區在螢幕上的顯示比例；響應式排版則取決於畫布使用的視窗寬度及網站的斷點規則。把桌面畫布縮到百分之五十，不等於切成手機頁面。
這個差別會影響你怎麼判斷標題換行、欄位堆疊和圖片大小。若只看畫布在螢幕上有多窄，就可能以為手機版已經正常，實際上仍是在看縮小的桌面版。本文用 Divi 5 官方示範編輯器的實際量測，分開看邏輯寬度與顯示比例。
先看頂部的兩個數值
Divi 5 Visual Builder 頂部有畫布寬度與縮放比例控制。畫布寬度通常以 px 顯示，縮放比例則以百分比顯示。檢查版面前，先把兩個值一起看，而不是只注意手機圖示或畫布外框。
假設畫布寬度是五百像素，Zoom 為百分之七十五，編輯區裡可見的畫布寬度約為三百七十五像素。但頁面內部排版所使用的視窗仍是五百像素。若把 Zoom 改為百分之五十，可見寬度變成約二百五十像素；這次只縮小顯示，沒有把內部視窗改成二百五十像素。
因此「看起來只有二百五十像素寬」不是足夠的手機判斷。先讀畫布寬度，再看目前選取的裝置或斷點。若你希望檢查更窄的排版，應調整畫布寬度或切換對應裝置，而不是繼續降低 Zoom。
用同一個寬度比較兩次縮放
在示範編輯器中，先選手機畫布，確認寬度欄顯示五百像素。打開 Zoom 選單，選百分之七十五。再改為百分之五十，觀察文字、按鈕與整個畫布一起縮小。這時不要同時修改字級或容器寬度，才能把顯示比例的影響單獨看清。
實際量測得到的結果是：五百像素畫布在百分之七十五縮放下，可見寬度為三百七十五像素；改為百分之五十後，可見寬度為二百五十像素。兩次畫布的 clientWidth 都是五百像素。編輯器用縮放顯示畫布，並沒有因此重寫頁面內部視窗寬度。
再看另一組：一千零二十五像素畫布使用百分之七十五 Zoom，可見寬度為七百六十八點七五像素。它在編輯器中雖然比實際桌面視窗窄，內部仍以一千零二十五像素排版。小數是縮放計算的正常結果，不需要為了消除小數去修改網站寬度。
切換畫布寬度後，再觀察排版
確認 Zoom 的用途後，保持同一個顯示比例，改用另一個畫布寬度。這次要看的是標題換行、欄位排列和元件尺寸是否隨內部視窗改變。只有在頁面確實設定了相關響應式規則時，寬度變化才會出現你預期的排版差別。
例如某組欄位在桌面並排，到了較窄寬度改為堆疊。切換到窄畫布後如果仍並排，先檢查該 Row 或容器的響應式設定，以及目前頁面的斷點，而不是認定 Zoom 數值不夠低。版面沒有變化，也可能是設計本來就允許兩欄在該寬度並存。
使用自訂斷點的網站，不能把另一個示範頁的手機寬度當成固定標準。先確認自己的 Responsive Editor 裡有哪些裝置與寬度範圍，再選擇有代表性的幾個寬度測試。本文的五百與一千零二十五像素是這次操作的值，不是要求所有網站採用這組斷點。
分開記錄字級與畫布縮放
當文字看起來太小，先確認 Zoom。字級設定為三十六像素，在百分之五十顯示下，視覺上會比百分之一百小很多；但 CSS 的 font-size 並沒有因此變成十八像素。若為了讓編輯器中的小字更好讀而把字級加倍，退出編輯器後就可能得到過大的標題。
處理手機標題時，先用適當 Zoom 看清操作，再在對應裝置的字級欄位調整。改完回到百分之一百附近核對閱讀感受，也檢查文字換行是否自然。Zoom 是工作視野的工具，字級是網站樣式，兩者各自負責不同事情。
若同時改了畫布寬度、Zoom 和字級，先停止連續調整，把三個值記下來。回到一個固定寬度，只改一項比較結果；這樣才知道究竟是排版規則、顯示比例，還是文字本身造成差異。
用瀏覽器量測時，注意兩種寬度
進一步檢查時，可以在瀏覽器開發工具比較畫布的 clientWidth 與 getBoundingClientRect().width。前者反映元素內部使用的佈局寬度，後者則是包含變形後的可見盒寬。這次兩者不同，正好對應編輯器的縮放顯示。
不要把整個瀏覽器視窗的寬度直接當成畫布寬度。左右設定面板會佔空間，編輯器仍可能使用另一個寬度來呈現頁面。看頂部控制值，並核對真正承載頁面的畫布，才能避免把外層工具列和內層網站混在一起。
開發工具的量測只能補充你目前看到的環境，不會自動證明真手機顯示相同。瀏覽器縮放、裝置像素比、系統字型及觸控行為仍需另外檢查。對一般版面排查而言，先區分內部寬度與顯示比例，就已能解決不少誤判。
最後退出編輯器核對一般頁面
完成自己的測試頁調整後，儲存並退出 Visual Builder，以一般訪客頁檢查桌面和窄視窗。這裡不再有編輯畫布的 Zoom 控制，應以瀏覽器實際視窗判斷內容。若編輯器看起來正常，訪客頁卻換行異常，重新檢查前臺 CSS、快取和斷點設定。
檢查時留一份簡短記錄：使用哪個畫布寬度、Zoom 多少、標題字級多少，以及退出編輯器後的結果。下一次接手修改時，就不必從「上次好像很小」開始猜。寬度決定這次檢查的版面範圍，Zoom 則幫你在螢幕上看清它。
若手動輸入寬度後數值又跳回原本的值，先重新讀取頂部欄位，不要把「有輸入」當成「已生效」。可以先用裝置預設切換，再核對畫布的實際寬度。某次輸入沒有套用時，應保留目前有效的數值重新操作，而不是拿原本想輸入的數字解釋畫面。
整理截圖給同事時，也建議把頂部寬度和 Zoom 一起保留。只有裁切後的內容圖，通常看不出這是在五百像素畫布還是縮小的桌面畫布；保留這兩項資訊，才方便對方重現你的檢查條件。
評論0