Multi Screen Test 測試網頁在不同裝置、螢幕解析度顯示效果

Multi Screen Test 測試網頁在不同裝置、螢幕解析度顯示效果

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

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

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

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

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

使用教學

STEP 1

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

Multi Screen Test

STEP 2

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

Multi Screen Test

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

Multi Screen Test

STEP 3

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

Multi Screen Test

值得一試的三個理由:

  1. 無須下載或安裝軟體,開啟瀏覽器即可使用
  2. 可測試自適應網頁設計在不同視窗大小的顯示效果
  3. 內建多種桌上電腦、手機、平板電腦和電視畫面解析度
分享到...