用 Chome Canary 版來開發手機及平板網頁

Chrome Canary 其實就是 Chrome Browser ,但這是個比測試版還要測試的版本,有加入了許多新功能,最近看到的是 Mobile emulation 的功能,不同於正式版的 Chome有提供自適應功能只能調整解析度,Chrome Canary 的 Mobile emulation 內建了很多裝置的解析度而且每個裝置的 device-pixel-ratio 都有,所以我們所撰寫的 css3 media query 就可以直接在桌機上測試而不需要用實體裝置來測試了。

安裝

Google 官方 Developer 已經有介紹 Mobile emulation 的安裝及詳細操作。

https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

反正就先從這下載回來裝吧。這個不會和原本電腦上裝的 Chrome 正式版衝突,假如你不 Care 兩套 Chrome 超吃記憶體的話,就不用移除本來的正式版,畢竟這個版本是比測試版還要測試的版本,有甚麼 Bug 我們不知道。

先測試網站比較看看

為了比較原本正式版 Chrome 和 Canary 有甚麼不同,我們可以用 http://bjango.com/articles/min-device-pixel-ratio/ 這個網址來測試。

Chrome 31 正式版提供的模擬

看以下截圖就知道,模擬了 Galaxy Nexus 這支手機,可是 min-device-pixel-ratio 根本就不可能是 1.0,min-resolution 也不可能是 96dpi ,由此可以證明,正式版的模擬功能是個假環境,只是修改了可視解析度而已。因為不模擬的時候數值也是一模一樣啊,這是桌機的數值。

mob-emu-1

Chrome Canary 版的模擬

嘿,看到沒有,我不敢說這數值一定對啦,畢竟我沒有 Nexus 7。不過至少他不會像 Chrome 正式版是個假模擬。

mob-emu-2

Mobile Emulation 操作介紹

看完了比較,就實際來操作 Chrome Canary 的 Mobile Emulation 功能。這項功能其實是在開發人員工具中,所以先打開吧。

mob-emu-3

確認 Mobile Emulation 功能有打開

如下圖點選開發人員工具的設定按鈕,可以做設定

mob-emu-4

確認 Show ‘Emulation’ view in console drawer 是勾選

mob-emu-5

 

開始使用 Mobile Emulation 了

如圖,點那個按鈕 (Show Console)

mob-emu-6

再來把頁籤切到 Emulation

mob-emu-7

上圖中可以看到可以選擇模擬的裝置,並且可以看到 Viewport 的參數,我們若按下 Emulate ,就代表開始模擬了。

若按下 Reset 就是取消模擬。請注意每次 Emulate 的時候,頁面要 Reload 才會生效。

現在我們就以圖中使用的 Google Nexus 7 2(其實那有甚麼 7 2 ,這是 Nexus 7 2013 版本吧 哈哈),來看看本站。

mob-emu-8

上圖除了把我的網站叫出來之外,另外看看紅色框線的地方,目前是 1920 X 1200 解析度(Resolution) ,這個可以想像是橫式的螢幕視角。

由於我的站有稍微修改為若 max-width: 600px 的時候會把上下左右 margin 縮小,所以我把解析度調換為 1200×1920(按 Resolution 中間那個鈕就可以對調了)。然後會看到下圖。

mob-emu-9

這個樣子是對了,我的網站在 max-width: 600px 真的就是長這樣 ,因為我剛好有一台 Nexus 7 2013 版本可以比對,截圖看到畫面小是因為我截圖的時候把整個視窗縮小才會這麼小。然後看一下我的 CSS Media Query 是不是有抓到,看下圖,確實有耶

mob-emu-10

max-device 是 600px,實際模擬的裝置 Nexus 7 是 1920X1200,當我對調方向為 1200X1920 的時候,這時候 1200 除以 device-pixel-ration:2 確實得到 600px。所以結果非常正確。

現在回頭來用正式版的 Chrome 也用 1200×1920 來模擬看看得到的畫面如下:

mob-emu-11

光是看到左右兩邊留白的部分就知道比例不對了。所以結論就是 Chrome 正式版的自適應只能做到解析度的自適應,這只適合桌機,在手持裝置下還要考慮到精度比例問題,所以網站開發者們可以趁早先安裝 Chrome Canary ,這真的可以幫助開發時節省不少時間喔。

後記 2014-01-15

1/15 , Chrome 32 正式版釋出,且已將此功能納入了,所以不需要安裝 Canary 也可以測試了

 

發佈留言