網站開發/網頁設計必學—【筆記型、桌上型電腦也能模擬手機行動版頁面】

隨著行動上網趨勢逐漸成為主流,身為一個網站管理者、開發者,為了讓使用者無論在任何時間、任何地點、任何設備上都能維持良好的網站瀏覽體驗,因此,勢必得特別留意網站的每個頁面在不同載具上的呈現方式是否對使用者友善,尤其是一些含有多功能、或是經過特別切版設計過的網頁設計,更是不得不去考量這件事。 為此目的,Google Chrome相當貼心的在「開發人員工具」中開放了這項功能,讓所有網站管理者、開發者都能夠輕易的在筆記型電腦及桌上型電腦上隨時切換、模擬網頁在不同載具上的呈現方式,不僅方便,也非常實用,至於該如何操作及使用這項功能?只需要簡單幾個步驟就搞定!!以下就趕緊來為各位做介紹吧:

 

STEP1:

首先以Google Chrome開啟你的網站,並點選右上角%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-22-%e4%b8%8a%e5%8d%889-41-16符號,如下圖所示~

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-22-%e4%b8%8a%e5%8d%889-24-46

 

STEP2:

接著在「更多工具」裡頭找到「開發人員工具」,點選進入程式編輯畫面~~

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-22-%e4%b8%8a%e5%8d%889-29-072

 

STEP3:

在程式編輯畫面上方選項找到並點選「toggle device toolbar」,進入不同行動裝置瀏覽畫面~~

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-22-%e4%b8%8a%e5%8d%889-39-32

 

STEP4:

進入行動裝置瀏覽畫面後,就可以從上方選項中任意挑選想要模擬的行動裝置,並且立即預覽行動版頁面的呈現樣貌。大功告成,是不是很簡單啊?趕緊來試試看吧~~

%e8%9e%a2%e5%b9%95%e5%bf%ab%e7%85%a7-2016-09-22-%e4%b8%8a%e5%8d%889-50-18

 

相關文章

網站實用工具-【SEO搜尋引擎優化的免費線上檢測工具:WooRank】... WooRank是一個免費的線上網站SEO檢測工具,不過免費版本只能夠讓你一個禮拜檢測一次,不過如果只是想單純檢測出影響你的網站SEO有哪些漏洞?免費版本所提供的資訊已經相當豐富、相當夠用,使用方法如下...
網站實用工具-【《goingup》使用說明:網站統計數據分析、SEO、關鍵字追蹤... ※語言:英文 ※主要功能:網站統計數據分析、SEO、關鍵字追蹤分析 ※網址:http://www.goingup.com/ ※使用心得: 雖然語言是英文,但別急著排斥它~~~~~這...
網站實用工具-【FeedBurner教學:透過E-mail來訂閱部落格最新文章的... FeedBurner是一個免費使用的實用工具,可以讓對你的文章有興趣的忠實讀者們,透過E-mail的方式來訂閱你的部落格,完成幾個簡單的訂閱動作後,讀者們每天就會定時的在自己的E-mail裏頭收到你的...