Knowledge

隨時提供最新的消息及科技新知給您, 讓您的掌握最新的網站設計新知。

 模擬RWD畫面的好用工具


( 資料來源: 梅問題.教學網 ) 發佈日期: 2017-03-15
圖_0 網設必備-《RWD Tool》模擬各行動裝置解析度的顯示畫面

隨著智慧型裝置愈來愈普及,網頁己不再只限於電腦中瀏覽,依照不同的解析範圍,顯示不同的畫面,現可用以下網址來測試所瀏覽的網站是否為RWD,可跨各瀏覽器,來模擬出各裝置的解析大小,並呈現出畫面的顯示效果,並可用來檢測是否有跑版或位移等問題。

網站名稱:Viewport resizer

使用方法很簡單,只要依照下列步驟,即可輕鬆套用RWD模擬器:

圖_2 Step1
進到網站後,對著中間藍色的按鈕,按住不放拖拉到Chrome的書籤列中。

圖_3 Step2
接著瀏覽網頁,當要模擬裝置解析時,點一下剛所加入的書籤。

圖_4 Step3
這時頁面上方就會出現黑色列,與裝置的圖示,滑到圖示上方時,右邊會顯示該圖示,所模擬裝置的名稱與解析大小。

圖_5 Step4
點下裝置縮圖後,畫面就會隨即縮到指定的範圍中,由於梅問題沒有設定自適版型,所以任何解析畫面看起來都一樣,只是版面變小而已。