網設必知-Google Chrome開發人員工具,可切換User-Agent即時預覽各裝置的顯示畫面

梅問題-網頁必備工具-Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
  之前在製作手機版網頁時,為了讓瀏覽器,能符合行動裝置的狀態,除了在捷徑中加入User-Agent,來初換網頁檔頭外,還會再加裝一套視窗大小切換的外掛,將視窗自動縮放到指定的大小,測試好後得再將參數移除,才不會瀏覽其它的網站時,都切到手機版模式,且偶爾還會發現一些怪現象,實在很不方便,但現在不用這麼麻煩啦!只要透過Google Chrome內建的開發人工具,就可任意的切換各種瀏覽器的版本,像是iOS、Android、BlackBerry、IE、Firefox...等,因此只要透過Google Chrome瀏覽器,就可預覽各種裝置或瀏覽器的呈現結果,相當的方便喔!且再也不用修改捷徑參數啦!因此身為網頁設計人員,絕不容錯過這個小技巧喔!

開啟網頁後,按F12鍵,開啟「開發人員工具」視窗面板,再按右下角的齒輪圖示。
梅問題-網頁必備工具-Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
切到Overrides項目下,從User Agent下拉選單中,選擇要模擬的設備與瀏覽器版本。
梅問題-網頁必備工具-Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
當切換好版本後,畫面會隨著裝置大小而縮小視窗,但網頁依然不變,這時只要按一下重新整理
梅問題-網頁必備工具-Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面
哈~重整後,立即就切到手機模式啦!而這只有版面上的模擬,至於操控事件與js的部分,還是得在實機上才行喔!
梅問題-網頁必備工具-Google Chrome開發人員工具切換User-Agent即時預覽各裝置的顯示畫面

相關文章

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

「Retina.js」網頁圖片支援Retina螢幕,並自動切換高解影像

表單按鈕不套用iPhone內建的圓角與漸層樣式效果

表單按鈕不套用iPhone內建的圓角與漸層樣式效果

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

MakeAppicon 線上立即產生iOS、Android所需的各種圖示大小

《Pure》羽量級自適應網頁版型框架 (RWD  Framework)

《Pure》羽量級自適應網頁版型框架 (RWD Framework)

CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表

CSS教學-【Responsive 網頁自適版型】Media Screen 一覽表





回應本篇 »

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

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

共 1 梅留言

  • 第1梅
    有位子 說道:

    感謝提供這項效果做參考,雖然沒有百分百模擬,但是至少有東西可以測試比較方便