• Tags , , ,
  •         
  • www.breakyizhan.com
  •    

    使用 Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站。了解如何使用 Device Mode 模拟多种设备及其功能。

    简述

    • 在不同的屏幕尺寸和分辨率(包括 Retina 显示屏)下模拟您的网站。
    • 通过可视化和检查 CSS 媒体查询进行自适应设计。
    • 使用网络模拟器在不影响其他标签流量的情况下模拟您网站的性能。
    • 针对触摸事件、地理定位和设备方向准确模拟设备输入

    切换 Device Mode

    切换 Device Mode 按钮可以打开或关闭 Device Mode。

    当 Device Mode 打开时,该图标呈蓝色 ()。

    当 Device Mode 关闭时,该图标呈灰色 ()。

    Device Mode 默认处于启用状态。

    您还可以通过按 Command+Shift+M (Mac) 或 Ctrl+Shift+M(Windows、Linux)来切换 Device Mode。要使用此快捷键,鼠标焦点需要位于 DevTools 窗口中。如果焦点位于视口中,您将触发 Chrome 的切换用户快捷键

     

    翻译自:https://developers.google.com/web/tools/chrome-devtools/device-mode/

    本文内容来自:Chrome DevTools谷歌浏览器开发者工具使用 Device Mode 模拟移动设备 – Break易站


    —Author: Arvin Chen —Web Address: www.breakyizhan.com (Break易站)

     
    转载请保留页面地址:https://www.breakyizhan.com/chromeconsole/1923.html