要做一頁式網頁或一頁式銷售頁時，設計師與業主最常問的問題之一是：「尺寸要開多大？」有人直接拿桌機螢幕的寬度開一張很長的畫布，有人乾脆把整頁做成一張長圖。這兩種做法在電腦上看起來都沒問題，但一頁式頁面的訪客大多從手機、而且常常是從社群廣告或通訊軟體的連結點進來，真正決定體驗的是手機上的呈現。這篇文章整理一頁式網頁尺寸的思考方式：設計稿寬度怎麼定、首屏高度要放什麼、各區段的長度怎麼估、為什麼不建議做成整張長圖、需要用圖片時怎麼切與壓縮，以及銷售頁在臉書等內建瀏覽器開啟時要注意的差異。文中提到的數字都只是業界常見的參考做法，實際要依版型與裝置調整，不是任何標準或規定。
一頁式網頁沒有固定尺寸，要決定的是三件事
網頁和印刷品最大的不同，是它沒有固定的紙張大小。同一個一頁式頁面，會被不同寬度的手機、平板、筆電與大螢幕開啟，寬度隨裝置改變，長度則由內容決定，理論上可以一直往下延伸。所以一頁式網頁尺寸並不是一組寬乘高的數字，而是在規劃時要先決定三件事：設計稿以什麼寬度繪製、內容在大螢幕上最寬延伸到哪裡，以及頁面中各種圖片要用什麼比例。
這三件事決定之後，設計師才知道版面怎麼排、工程師才知道在不同寬度下怎麼調整，攝影或美編也才知道素材要準備成什麼比例。很多一頁式頁面上線後在某些手機上跑版、圖片被裁掉重點，往往不是設計不好，而是一開始只畫了一個尺寸，其他尺寸全靠猜測。
設計稿寬度：手機優先，再往桌機延伸
一頁式頁面多半用來承接廣告或社群導流，手機訪客通常是主力，因此建議先畫手機版。手機設計稿常見的做法，是以主流手機的邏輯寬度繪製，例如 375 或 390 像素左右，再確認版面在較窄與較寬的手機上都不會出問題。這只是方便溝通的基準，不代表所有手機都是這個寬度，實作時版面必須能隨寬度伸縮。
桌機版則不必把每個區塊都拉滿整個螢幕。比較穩當的做法是設定一個內容最大寬度，文字與主要內容只在這個範圍內排列，背景色或背景圖再延伸到全寬；常見的內容寬度落在一千多像素之間，依版型與字級調整。這樣在大螢幕上，一行文字不會長到難以閱讀，按鈕與表單也不會被拉得過寬。
圖片的輸出尺寸要和設計稿寬度分開思考。手機螢幕的像素密度高，若圖片只按設計稿寬度輸出，在手機上可能顯得不夠清晰；常見做法是準備約兩倍寬度的版本，再搭配壓縮控制檔案大小。同一張圖若要在桌機上滿版呈現，則應另外準備較寬的版本，而不是把手機用的圖放大。
首屏高度：不要用一個固定數字塞滿
首屏指的是訪客打開頁面、還沒捲動前看到的畫面。很多人會想把首屏設計成剛好一個螢幕高，但手機實際可視高度差異很大：不同機型的螢幕比例不同，瀏覽器的網址列與工具列會隨捲動出現或收起，從社群應用程式開啟時還多了一層內建瀏覽器的上下工具列。設計時與其追求精準塞滿，不如把最重要的內容集中在首屏上半部，確保在可視高度較小的情況下仍然看得到。
首屏該放的內容通常包括：一句說清楚提供什麼的主標、一句補充對誰有用的副標、能代表產品或服務的主視覺，以及一個主要行動按鈕。首屏底部最好露出下一段的一小部分，暗示下面還有內容。要避免的是把主標或按鈕放在首屏最底部，在可視高度較小的手機上，它們很可能被工具列擋住或被推到畫面之外。
如果首屏用了滿版背景圖，還要考慮不同比例下的裁切。手機上的直式畫面與桌機上的橫式畫面，能看到的範圍完全不同，主體應放在畫面中央的安全範圍內，必要時準備手機與桌機兩種構圖。
各區段長度：用「畫面數」估算整頁長度
一頁式頁面的總長度，很難在設計前用像素精準預估，比較實用的方法是用「手機上大約幾個畫面」來估算每一段。例如痛點說明一段、產品特色三段、使用情境一段、常見問題一段、行動區一段，每段的內容量對應到幾個畫面，加總起來就能看出整頁大概多長，也能及早發現哪一段過度膨脹。
影響區段長度最大的通常是圖片比例。桌機上並排的橫式圖片，到了手機變成上下堆疊，每一張都會佔掉不少高度；在手機版改用方形或直式比例，或把多張圖改成可左右滑動的排列，可以有效壓縮長度。文字區塊則要注意行寬：手機上一行字數有限，長段落會變得很長，適度分段與改用條列，比縮小字級更能維持可讀性。
一頁式銷售頁通常比形象型的一頁式網頁更長，因為需要說明產品、回應疑慮、呈現方案。頁面越長，行動按鈕就越需要在中段重複出現，或在手機版加上固定的行動列，讓訪客不必捲回頂端或拉到最底才能行動。
為什麼不建議把整頁做成一張長圖
把設計稿整張輸出成圖片、直接放上網頁，是一頁式銷售頁常見的做法，因為快速，而且畫面跟設計稿完全一樣。但這種做法的缺點，往往在上線後才一一浮現：
- 無法被搜尋：文字都在圖片裡，搜尋引擎讀不到內容，頁面很難因為產品名稱或相關問題被找到
- 無法複製與翻譯：訪客想複製產品名稱、規格或優惠代碼都做不到，瀏覽器的翻譯功能也派不上用場
- 載入慢：一張高解析度的長圖檔案很大，網路不穩時首屏遲遲出不來，訪客可能直接離開
- 手機上放大模糊：為了控制檔案大小而壓縮過的長圖，放大閱讀細字時容易糊成一片
- 無障礙差：使用螢幕閱讀器的訪客只能聽到一張圖片，無法得知任何內容
- 難以修改與適應：改一個價格或日期就要重新輸出整張圖，也無法依螢幕寬度重新排版
比較好的做法是讓文字維持網頁文字，圖片只負責視覺。標題、說明、規格、價格與按鈕用網頁元素呈現，搭配背景圖或產品照，在手機上一樣能做出接近設計稿的效果，同時保有可搜尋、可複製、好修改的優點。
需要用圖片時，怎麼切割與壓縮
有些區塊確實需要以圖片呈現，例如產品情境照、圖解或插畫。這時的原則是依內容切割，而不是依長度硬切：每一張圖對應一個完整的視覺單元，圖片之間的文字與按鈕則用網頁元素製作。這樣既能讓圖片依需要載入，也避免圖片在不同寬度下錯位，出現接縫或斷裂。
壓縮方面，先依實際顯示尺寸輸出，不要把相機原圖直接上傳；照片類素材可以考慮較新的圖片格式，在畫質相近的情況下通常能減少檔案大小，但要確認目標瀏覽器的支援情況。首屏以外的圖片可以設定延遲載入，首屏主視覺則應優先載入，不要延遲。每張圖片也要在網頁中註明寬高比例，避免載入過程中版面跳動，讓訪客點錯位置。
如果同一張圖要在手機與桌機呈現不同構圖，可以準備兩個版本，讓網頁依螢幕寬度載入對應的圖，而不是讓手機下載桌機用的大圖再縮小顯示。
一頁式銷售頁在臉書內建瀏覽器的顯示差異
一頁式銷售頁的流量常來自臉書廣告或通訊軟體分享，訪客點下連結後，頁面多半不是在手機預設的瀏覽器開啟，而是在應用程式內建的瀏覽器中顯示。內建瀏覽器有自己的上方標題列與下方工具列，可視高度比一般瀏覽器更小；頁面底部若有固定的行動按鈕列，可能與內建工具列重疊或貼得太近，導致不好點擊。
此外，內建瀏覽器在部分功能上的表現可能與一般瀏覽器不同，例如表單自動填入、檔案下載、開啟外部應用程式的連結，或是某些字型與動畫效果的呈現。這些差異會隨應用程式版本更新而改變，最可靠的方法是實際測試：把連結貼到臉書、Messenger 與 LINE 等常用管道，用不同手機點開，從首屏、捲動、固定按鈕到表單送出完整走一遍。
測試時也要確認分享預覽是否正常，包括預覽圖是否被裁切、標題與描述是否正確。預覽圖的規格與頁面本身的尺寸是兩回事，應另外準備，不要直接沿用首屏主視覺。
常見問題
一頁式網頁設計稿要畫多寬？建議先畫手機版，以主流手機的邏輯寬度為基準，再設定桌機版的內容最大寬度。這些數值是方便溝通的參考，不是標準，實作時版面要能隨螢幕寬度伸縮，並在不同裝置上實際檢查。
一頁式銷售頁的總長度有沒有上限？沒有固定上限，但頁面越長，越需要清楚的段落節奏與重複出現的行動按鈕。若發現同一個主題被拆在相隔很遠的位置，或需要在頁面中加入目錄才找得到內容，通常代表內容量已經適合拆成多頁。
已經做成整張長圖的銷售頁要怎麼改？可以先把標題、說明、規格、價格與按鈕等文字內容改成網頁文字，保留真正需要以圖片呈現的情境照與圖解，再依區塊切割圖片。改寫時順便檢查首屏載入速度與手機上的可讀性。
桌機版還需要另外設計嗎？如果有一定比例的訪客使用電腦，建議至少確認首屏與主要區塊在桌機上的排列，特別是滿版圖片的構圖與文字的行寬。若訪客幾乎都來自手機，可以以手機版為主，桌機版採用置中的內容寬度呈現。
一頁式網頁尺寸抓得好不好，最終要看在訪客的手機上是否清楚、好讀、載入順暢。如果你已經有一頁式網頁或銷售頁，想知道在手機上的首屏呈現、圖片載入與可被搜尋的程度有沒有需要調整的地方，創昇SEO提供免費網站健檢，可以協助你檢視目前頁面的狀況。
如果想當面討論長圖改成網頁文字的做法，或銷售頁在各種裝置與內建瀏覽器上的呈現，創昇SEO也提供全台免費到府解說，直接對著實際畫面說明比較容易聚焦。