如何檢查網站的響應式效果 ?

響應式網頁的顯示效果會依據螢幕尺寸自動進行調整,但我們必需在手機、平板、筆電、或 PC 上一一載入網頁才能進行檢視嗎 ? 當然不需要,您只要在 PC 上透過改變瀏覽器的大小,就可以檢視響應式網頁的效果。

改變瀏覽器視窗的大小

  • 在 PC 上開啟您習慣使用的瀏覽器 ( 此處以 Chrome 為例 ),並輸入您想要檢視網站的網址。
  • 在瀏覽器頂端標題列的空白處雙擊滑鼠。
  • 將滑鼠移到瀏覽器的左、右邊框上,當滑鼠指標變成 時,按住滑鼠左鍵並移動滑鼠,就可改變瀏覽器的視窗大小。
  • 如果瀏覽器底部出現捲動桿,就代表此網頁不支援響應式功能,或是網頁設計出現瑕疵,讓網頁內容超出螢幕尺寸。

顯示瀏覽器視窗大小

如果改變瀏覽器視窗大小時,想知道目前視窗的 size,可以安裝 Window Resizer ( 僅適用於 Chrome 瀏覽器 )。

Window Resizer 提供二個功能:

  • 點擊視窗右上方的 圖示,並從下拉選單中點擊某個裝置,便可將瀏覽器直接切換到指定的尺寸大小。
  • 改變視窗大小時,視窗右下角會出現目前視窗的尺寸:
    • window size:電腦螢幕可以看到網頁的部份。
    • viewport size:行動裝置 (如手機、平板) 可以看到網頁的部份,這個數值會隨裝置的不同而改變。

我要留言

* 為必填欄位

  • 2 + 5 =