[TOC] ## 測試響應式設備視圖 最新的設備模式（Chrome 49以后）是一套完整的移動設備優先的調試工具，是對主體功能的重要擴展。接下來，讓我們一起學習如何應用設備模式來模擬不同的設備以及它們的響應特性。 ### 使用視圖控制器  視圖控制器提供兩種模式用來測試你的移動網頁 1. **響應式** 完全響應式 2. **特殊設備** 提供常見的幾種設備，完全模擬所選設備視圖特性 ### 響應式模式 我們推薦使用響應式模式作為默認的工作模式。在實際的開發過程中使用，能夠使得開發的頁面具備完全的響應特性，適配未知的以及未來的設備類型。 更多響應式模式的介紹，請見后文。 #### 定制視圖大小 如下圖，可以通過拖動左右下方的拖動條直接改變視圖大小，或者通過輸入的方式，輸入更精細的值。  ### 特殊設備模式 我們一般提倡，在項目開發的末期，使用特殊設備模式，用來檢視網頁在某些特殊設備上的展現。 #### 內置的設備預置 設備模式內置提供了幾乎所有常見的設備類型，可在設備下拉列表中選擇。選擇后，相應的預置屬性會自動模擬相應的設備： * 設置正確的“User Agent" * 設置正確的分辨率和DPI * 模擬觸摸事件 * 模擬移動設備滾動條以及視圖 * 自動調整文本大小  #### 自定義設備預置 設備模式允許你添加自定義的設備進行模擬，用于那些沒有被覆蓋到的邊緣設備。 通過如下步驟進行 1. 打開谷歌開發者工具設置頁面 2. 點擊**設備**標簽頁 3. 點擊**添加設備**摁鈕 4. 填入設備名、寬、高、設備像素比和UA字符串 5. 點擊**添加** 現在你的設備就在設備下拉菜單中了  #### 設備狀態和方向  如上圖，當在特定設備模擬時，會有一個切換摁鈕用于切換移動設備的橫向和豎向模式。 當然，摁鈕并不止切換方向這么簡單，對于支持更多模式的設備類型如Nexus 5X，點擊后，會彈出一個下拉菜單，用于選擇各種展示模式。  #### 縮放 有些時候，設備分辨率太大， 瀏覽器窗口不足以顯示所有內容，此時，縮放功能會解決這個問題。 1. **適應窗口** 會自己將設備縮放至可顯示的最大空間 2. **百分比** 設備顯示的縮放比例  ### 可選的控件 可選的控件通過設備模式右上角三個點的摁鈕進行添加或者修改。  #### 設備像素比 如果你在非Retina環境下模擬Retina設備，或者在Retina環境下模擬非Retina設備，你需要調整**設備像素比**。設備像素比是設備物理像素和邏輯像素之間的比值。在具備Retina顯示的設備下，譬如Nexus 6P，具備更高的像素密度，進而影響可視范圍的銳度和大小。 網頁上會受設備像素比影響的地方有： * 媒體查詢 譬如 ``@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ... }`` * CSS中關于圖片的一些設置 * ``window.devicePixelRatio``的值 對于一臺原生的Retina顯示屏，你會發現DPI太低看起來像素化，而太高會比較尖銳。在標準的Retina顯示器上，將DPR設置成2，通過縮放視圖大小來模擬這些效果。 #### 媒體查詢 [媒體查詢](https://developers.google.cn/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries)是響應式網頁設計的核心思想。  在可選控件下拉菜單中，選中**顯示媒體查詢**選項，谷歌開發者工具會在層疊樣式表中檢查媒體查詢，并且在視窗頂部用不同的顏色展示出來。  不同顏色的含義為：  點擊媒體查詢顏色條，會自動調整為相應屏幕尺寸，方便預覽相應尺寸下的樣式。 右擊能夠顯示媒體查詢被定義的位置，并且可以跳轉到相應源碼的位置。如下圖  #### 標尺  ### 局限性 * GPU 和 CPU不能模擬 * 系統顯示不能模擬 * 某些依賴真實設備的特性不能模擬 * …… 盡管設備有這些局限性，但設備模式的功能已經強大到滿足絕大部分的需求。如果你需要在真實設備上測試，你可以通過[遠程調試技術](247129)獲取更多的信息。