谷歌瀏覽器測試移動端網頁

首先開啟谷歌開發者工具的裝置模式，圖示如下：

點選紅框處實現裝置模式的切換，切換後重新載入頁面效果如下：

螞蟻部落的頁面切換到移動端版本（當然網站必須具有移動版本，否則無效果）。

可視視窗控制元件：

使用頂部的可視視窗控制元件，可以針對各種裝置測試網站，以及完全響應式。 

它有兩種模式：

（1）.Responsive(響應式) ， 通過任意任何一個調節手柄自由調整可視視窗大小：

建議使用Responsive Mode(響應式模式)作為預設工作模式。

在開發期間調整視口的大小，以建立一個自由的響應式設計，適應甚至未知和未來的裝置型別。

要充分利用響應式模式，請開啟媒體查詢欄：

可以拖動可視視窗上的調節手柄或單擊選單欄中的值、輸入具體的值來進行精細度的控制：

（2）.Specific Device(指定裝置)、 將可視視窗鎖定在特定裝置的確切可視視窗大小，並模擬某些裝置特徵。

當已經接近開發結束或者希望完善你的網站在特定手機（例如某個iPhone或Nexus）上的顯示效果時，可以使用Specific Device Mode(指定裝置模式)：

預設裝置簡介：

在上面已經瞭解到裝置模式中，有大量預設的移動端裝置，下面簡單介紹一下它們的特性:

（1）.設定正確的 "User Agent" (UA) 字串。

（2）.設定裝置解析度和DPI（裝置畫素比）。

（3）.模擬觸控事件（如果適用）。

（4）.模擬移動滾動條疊加和元視口。

（5）.為沒有定義的視口的頁面自動調整（提升）文字。

新增自定義裝置：

如果已經預設的裝置不能滿足需求，我們可以新增自定義裝置：

然後進入如下介面：

根據介面上的相關提示根據需要自行配置相關引數即可。

裝置狀態和方向：

當模擬特定裝置時（在響應式模式下無效），Device Mode(裝置模式)工具欄顯示一個附加控制元件，主要用於切換模擬裝置的橫向和縱向。在所選裝置上，控制元件不僅僅是定向切換。 對於受支援的裝置（如Nexus 5X），會看到一個下拉選單，允許您模擬某些裝置狀態：

（1）.預設瀏覽器UI。

（2）.帶Chrome導航欄。

（3）.開啟鍵盤。

縮放至合適大小：

有時需要測試解析度大於瀏覽器視窗中實際可用空間的裝置。

在這些情況下，縮放至合適選項就派上用場：

（1）.Fit to Window (適合至視窗) - 自動將縮放級別設定為最大可用空間。

（2）.Explicit percentages(顯式百分比) - 如果您想要測試影像上的DPI，顯式百分比是有用的。

可選的控制元件（如觸控、媒體查詢，DPR）:

通過點選右側三個點彈出一個選單，可以進行更多的設定：

下面介紹幾個常用功能：

1.媒體查詢：

媒體查詢是響應式網頁設計的一個重要組成部分。要檢視媒體查詢檢查器，在三點選單中點選Show Media queries(顯示媒體查詢)。 DevTools 會檢測樣式表中的媒體查詢，並在頂部標尺中將其顯示為彩色條。

媒體查詢的顏色編碼如下:

右鍵單擊某一欄可以檢視CSS中定義該媒體查詢的位置並跳轉到原始碼中的定義：

2.顯示標尺：

3.裝置畫素比（DPR）:

如果您想在非Retina屏的機器上模擬Retina屏裝置，或反過來，只需要調整Device pixel ratio(裝置畫素比)就可以了。Device pixel ratio(裝置畫素比)（DPR）是邏輯畫素和物理畫素之間的比率。具有Retina屏的裝置，例如Nexus 6P，比常規裝置具有更高的畫素密度，它可以影響內容的視覺清晰度和視覺大小。

有一些關於Device pixel ratio(裝置畫素比)（DPR）的例子：

（1）.CSS媒體查詢,比如:@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {  }

（2）.CSS image-set 規則。

（3）.圖片上的srcset屬性。

（4）.window.devicePixelRatio 屬性。

如果有一個原生Retina顯示，低 "Dots Per Inch" (DPI) 的資源看起來畫素化，而較高DPI的資源是清晰的。為了在標準顯示器上模擬這種效果，將DPR設定為2並通過比例縮放視口。2x的資源看起來依然清晰，而1x將看起來畫素化。

4.配置網路（UA，網路調節）:

選擇此選項將允許你更改網路相關行為：

可以進行一些網路限制方面的設定。

5.Device Type(裝置型別)：

Device Type(裝置型別)設定可以允許你更改裝置的型別:

更改此設定將影響移動視口和觸控事件模擬，並更改UA字串。因此，如果想為網站建立響應式的PC網站，並想要測試懸停效果，應該從Responsive Mode(響應式模式)切換到“Desktop”。

特別說明：模擬畢竟是模擬，有諸多不足之處:

（1）.GPU和CPU的行為無法模擬。

（2）.瀏覽器的使用者介面（UI）

（3）.系統顯示，比如位址列，不會被模擬。

（4）.本地顯示器，如 <select> 元素，不會模擬為一個模態列表。

（5）.一些增強功能，如開啟數字輸入鍵盤，可能與實際裝置的行為有所不同。

（6）.WebGL可以在模擬器中實現，但iOS 7裝置不支援。

（7）.Chrome不支援MathML，但iOS 7裝置支援。

（8）.模擬器不會覆蓋AppCache 的 清單檔案 或 檢視原始碼請求 的UA。

上面是常見的一些無法模擬的功能，當然可能還有更多。