Posts Tagged With: css3

[Chrome] 模擬行動裝置瀏覽器

話說,去年 10 月就在喊,Chrome 會在去年 12 月放出 低耗能 的正式版,終於在前兩天放出來了,紀念一下今天更新 Chrome ,就來看看工作利器,模擬行動裝置瀏覽器的操作步驟。

Chrome 57省電有一套,將背景分頁CPU使用率限制在1%內

選 Chrome 是因為夠直覺,但最重要一點是虛擬機沒法比的,就是 桌面版 Chrome 內建的開發工具,可以方便針對 javascript / css / html 語法除錯。

直接上 Chrome 57 的螢幕截圖:

從右上角 設定符號 展開選單,點選 [開發人員工具]

開發人員工具

開發人員工具

在開發工具 展開設定選單,點選 [Settings]

設定

設定

勾選需要模擬的內建裝置,或自己新增自訂裝置

新增自訂裝置

新增自訂裝置

開發工具在工具列點選 切換網頁為 裝置模擬畫面

切換網頁為裝置模擬畫面

切換網頁為裝置模擬畫面

選擇要模擬的行動裝置,這邊以 Microsoft Lumia 950 為例。

選擇模擬裝置

選擇模擬裝置

從工具列可以修改長、寬 (預設裝置),若已選定模擬裝置,只能選擇縮放比例跟轉向,部分裝置不提供轉向功能。

轉為橫向

轉為橫向

操作時,可看到一個大大的圓圈,是滑鼠模擬手指點選的中大圓形。

滑鼠模擬手點為中大圓形

滑鼠模擬手點為中大圓形

IE 11 雖然也有簡單的模擬功能,但是沒有這麼視覺化,Chrome 桌面版在桌面狀態下不支援 viewport 設定及 SVG 縮放,但是在行動裝置模擬狀態時則支援。

紀念一下 Chrome 節電 66%~

廣告
Categories: 電腦和網際網路, 行動裝置, 工作點滴 | 標籤: | 1 則迴響

在WordPress.com寫網誌.

%d 位部落客按了讚: