歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> 使用 Chrome 開發工具的設備模式來開發響應式 Web 應用

使用 Chrome 開發工具的設備模式來開發響應式 Web 應用

日期:2017/3/1 9:40:03   编辑:Linux編程

我們在桌面和移動設備上開發網站,通常我們傾向於最初的桌面體驗。 但是這與越來越多的用戶使用移動設備訪問網絡的趨勢相脫離。 為了提高網站的用戶體驗,我們需要准確地知道網站在移動設備上的效果。 不久前,Chrome 開發者工具包裡加入了手機模擬器特性,但是它不能連接真實的設備,還需要很多試驗和調試。 Chrome38 Beta版包含一個新的設備模式:一次點擊就可以啟動手機模擬器、檢查設備連接情況、模擬片狀網絡。

現在,開啟chrome“獲取元素”圖標右側的設備模式。 開啟後,chrome會自動顯示一個手機模擬器窗口,它可以模擬手機上所有的觸摸事件。 通過調整模擬器而不是整個浏覽器窗口的大小,你可以方便的測試各種尺寸的屏幕。 你可以選擇模擬器中預置的手機型號,它會自動調整模擬器窗口、觸摸效果、用戶代理、屏幕分辨率等設置。

每一次媒體查詢都會以可視化的形式表現出來,因此你可以在模擬器中關聯斷點。 點擊一次即可調整模擬器大小,這使我們可以反復測試網站關聯的樣式。 如果你想修改媒體查詢模塊,點擊右鍵,跳轉到定義css的代碼。

最後,設備模擬器需要精確的將連接顯示給移動用戶.例如,一個3G連接相對於辦公室的快速WIFI而言,極大程序的限制了網站的體驗.DevTools可以幫助模擬網絡連接狀況(吞吐量和延遲),如EDGE, 3G, 4G – 甚至是離線.

典型的系統級的網絡條件限制了所有的東西,DevTools卻只限制當前的tab.這使得app可以離線運行,並嘗試AppCache和Service Worker場景,同時,在另一個tab浏覽參考資料.

請在你的開發工作流中試驗Device Mode,然後告訴我你的想法.如果你急切的想知道更多關於DevTools的優點,請查看我的頁面Google I/O 2014 talk: Developing Across Devices.

Ubuntu 14.04 LTS下安裝Google Chrome浏覽器 http://www.linuxidc.com/Linux/2014-04/100645.htm

Ubuntu 13.04 安裝 Chrome 依賴問題解決 http://www.linuxidc.com/Linux/2013-04/83638.htm

openSUSE安裝Chrome浏覽器 http://www.linuxidc.com/Linux/2013-05/84046.htm

Linux用戶安裝 Google Chrome 35 Beta 說明 http://www.linuxidc.com/Linux/2014-05/101099.htm

CentOS 6.x 安裝Google Chrome浏覽器 http://www.linuxidc.com/Linux/2013-01/78066.htm

Chrome 的詳細介紹:請點這裡
Chrome 的下載地址:請點這裡

Copyright © Linux教程網 All Rights Reserved