跳至主要內容區
:::

如何檢查網站的響應式效果 ?- 響應式網頁設計

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

方法一:改變瀏覽器視窗的大小

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

方法二:瀏覽器加裝擴充功能

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

擴充功能名稱:Window Resizer

下載網址:Chrome 線上應用程式下載頁面

Window Resizer 提供二個功能:

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