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

admin發表於2019-06-14

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/150438dp9zxdxiv7ca83c3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/150646rsr6s1zd476zbzal.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

可視視窗控制元件:

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

它有兩種模式:

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

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

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/150817sujnm0jxsuseeegw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/150846xxojza7bii6ixvv3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/150929p8z8i6o9x8rx7dud.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

預設裝置簡介:

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

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

(2).設定裝置解析度和DPI(裝置畫素比)。

(3).模擬觸控事件(如果適用)。

(4).模擬移動滾動條疊加和元視口。

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

新增自定義裝置:

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151008xpvcp3u2pzva19fl.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

然後進入如下介面:

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151040e4wthf7twb2hoc3a.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

裝置狀態和方向:

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151143pr31amp3cg4a443u.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

(1).預設瀏覽器UI。

(2).帶Chrome導航欄。

(3).開啟鍵盤。

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151216mbqmkaq4majzj8gb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

縮放至合適大小:

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

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

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151312wdsorjwqdgdivrer.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可選的控制元件(如觸控、媒體查詢,DPR):

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151333uif1u1aausl3n3zp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151353ohcouvru4bcrcvho.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面介紹幾個常用功能:

1.媒體查詢:

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

aid[3343]

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151528yb6gbk221pjpwwk1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

aid[3345]

2.顯示標尺:

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151622kya558i4iif3ksoz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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,網路調節):

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151705i4x1y1qtz1vvwyc8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

5.Device Type(裝置型別):

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

a:3:{s:3:\"pic\";s:43:\"portal/201906/14/151732s5rbja4biu1m6vv8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

更改此設定將影響移動視口和觸控事件模擬,並更改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。

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

相關文章