近幾年已進入所謂的「多螢時代」，除了電腦外，可能許多人也同時擁有智慧型手機或是平板電腦，為了應付不同的畫面大小需要，網頁開發者也必須適當修改網頁，才能在閱讀時不至於發生問題。目前較為普遍運用的技術為為「自適應網頁設計（Responsive Web Design, 縮寫為 RWD）」，也就是能依照不同解析度的瀏覽裝置，自動調整網頁佈局，進而達到同一版面樣式，但可以在電腦、手機、平板電腦上正確閱讀的效果。

如果要比較「自適應網頁設計」在不同尺寸畫面的顯示效果，其實你不需要準備多個裝置來進行實際測試，最簡單的方法是拖曳你的瀏覽器視窗，讓它變小、變窄，就能看到網頁佈局產生變化。

那你或許會問：有沒有更合適的工具，能準確測試網頁在不同裝置的顯示情形呢？

利用本文介紹的 Multi Screen Test，自由調整視窗大小，查看網頁在特定比例的具體顯示樣式，此外，它還內建多種裝置的解析度資料，包含一般桌上電腦、手機、平板電腦、電視等等，選擇後就能快速讓網頁顯示於特定大小的畫面裡，用以測試自適應網頁設計可否獲得開發者想要的效果。

網站名稱：Multi Screen Test
網站鏈結：http://whatismyscreenresolution.net/multi-screen-test

使用教學

STEP 1

開啟 Multi Screen Resolution Test 工具後，先輸入要檢測的網站鏈結，按下 Test 按鈕後網頁就會顯示於畫面裡。

STEP 2

預設畫面大小為 1024 x 600，你可以依照需求直接從上方修改視窗大小，按下 Apple 來檢視網頁在特定大小的顯示效果。

比較特別的是 Multi Screen Test 已經內建許多裝置的畫面解析度資料，例如從 Mobile 裡可以直接切換 iPhone 5、iPhone 6、iPhone 6+ 、4.7” Google Nexus 等手機的畫面大小，當然其他還有桌上型電腦、平板電腦、電視等多種類型可以選擇。

STEP 3

Multi Screen Test 的操作方法很簡單，相信只要去稍微動手使用一下，就能知道它真確實是一個挺方便的開發者輔助工具。如果想測試網頁在手機或平板電腦橫放時的顯示效果，點選上方的「Rotate」就能快速 90 度翻轉畫面。

喜歡免費資源網路社群的文章嗎？歡迎追蹤我們的 Facebook、Twitter 和 Google+，或是透過 Email 訂閱更新。