網設必備-《Web Responsive Design Tool》模擬各行動裝置解析度的顯示畫面

梅問題-網設必備-Web Responsive Design Tool各裝置解析網頁頁面模擬工具
  隨著智慧型裝置愈來愈普及,網頁己不再只限於電腦中瀏覽,而要讓網頁能符合各行動裝置的解析來顯示,所以就可在CSS中設定,依照不同的解析範圍,顯示不同的畫面,通常在製作上,不會有什麼太大問題,但最後測試時,手邊就要有一堆手機或平板,所以之前梅干曾用過Chrome外掛,來模擬各解析的大小,但那只限於Chrome瀏覽器,若使用Safari或Firefox的朋友,就只能自已用目測改變視窗來測試,而梅干最近發現一個好站台,不用安裝任何的外掛,可跨各瀏覽器,來模擬出各裝置的解析大小,並呈現出畫面的顯示效果,來檢測是否有跑版或位移等問題,因此身為網設計的朋友們,這網站一定得好好利用。

Viewport resizer:
網站名稱:Viewport resizer
網站網址:http://lab.maltewassermann.com/viewport-resizer/
支援瀏覽器:Firefox、Chrome、Safari、Oprea

Step1
進到網站後,對著中間藍色的按鈕,按住不放拖拉到Chrome的書籤列中。
梅問題-網設必備-Web Responsive Design Tool各裝置解析網頁頁面模擬工具
Step2
接著瀏覽網頁,當要模擬裝置解析時,點一下剛所加入的書籤。
梅問題-網設必備-Web Responsive Design Tool各裝置解析網頁頁面模擬工具
Step3
這時頁面上方就會出現黑色列,與裝置的圖示,滑到圖示上方時,右邊會顯示該圖示,所模擬裝置的名稱與解析大小。
梅問題-網設必備-Web Responsive Design Tool各裝置解析網頁頁面模擬工具
Step4
點下裝置縮圖後,畫面就會隨即縮到指定的範圍中,由於梅問題沒有設定自適版型,所以任何解析畫面看起來都一樣,只是版面變小而已。
梅問題-網設必備-Web Responsive Design Tool各裝置解析網頁頁面模擬工具

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 2 梅留言

  • 第2梅
    ki1418 說道:

    我還傻傻的,不斷要求網友用不同的瀏覽器去測試= =

    回應:
    下回就不用再麻煩其它網友幫測啦!
  • 第1梅
    阿秉 說道:

    老師。 好像有些網站沒辦法使用這個套件。。。

    回應:
    不太明白你的意思,是指有些網站自適版型,但無法套用嗎