1. 程式人生 > >Google Chrome開發者工具-移動模擬:裝置取向和CSS媒體型別

Google Chrome開發者工具-移動模擬:裝置取向和CSS媒體型別

裝置取向(Device Orientation Overrides)

許多新的移動裝置具有加速度計(accelerometers),陀螺儀(gyroscopes),指南針(compasses)以及一些其他用來確定運動捕捉和方向資料的硬體。很多網頁瀏覽器可以訪問這些新的硬體特性,比如通過HTML5 DeviceOrientation事件。這些事件為開發者提供關於裝置取向,移動以及加速度方面的資訊。

如果你的應用程式使用了裝置取向事件,那麼在桌面上對接收到的這些裝置取向的取值進行覆蓋修改會有助於程式除錯,無需在真實裝置上進行測試。

覆蓋裝置取向值

  1. 你會看到一個標準的HTML5標誌,以及當前裝置取向值列表
  2. 開啟開發者工具中的覆蓋(Overrides)選單
  3. 勾選"Override Device Orientation"
  4. 你會看到三個欄位:
    • α: 裝置在z-軸向的旋轉角度
    • β: 裝置從左到右的傾斜角度
    • γ: 裝置從前到後的傾斜角度
  5. 修改取值如下:
    1. α - 0
    2. β - 60
    3. γ - 60
Enabling device orientation overrides

我們改變了左右傾斜和前後傾斜,這樣結果是我們的應用模擬了一個順時針方向的旋轉。

Device orientation allows us to emulate the directions a device may be turned

CSS媒體型別模擬(CSS Media Type Emulation)

CSS 媒體型別允許我們依據所處的不同裝置,來運用不同的樣式。(比如 print, screen, tv, braille 等).

模擬媒體型別(Emulating media types)

  1. 開啟開發者工具中的覆蓋(Overrides)選單
  2. 啟用"Emulate CSS media" 並從下拉框中選擇"print"媒體型別選項
  3. 頁面會被調整為使用和該CSS媒體型別匹配的樣式,如果可用的話
Before:After:
Before enabling CSS media type emulationAfter enabling CSS media type emulation

by iefreer