使用 Chrome 开发者工具的Device Mode
(设备模式)来构建移动优先,完全响应式的网站。了解如何使用它来模拟各种设备及其功能。
简而言之
- 在不同的屏幕尺寸和分辨率,包括Retina显示屏,上模拟您的网站。
- 通过可视化和检查CSS媒体查询进行响应式设计。
- 使用网络模拟器评估网站的性能,而不会影响其他标签的流量。
- 准确地模拟触摸事件,地理位置和设备方向的设备输入。
切换Device Mode
(设备模式)
切换Device Mode
(设备模式)来控制Device Mode
(设备模式)的开和关。
当Device Mode
(设备模式)打开时,图标为蓝色()。
关闭时,图标为灰色()。
默认情况下启用Device Mode
(设备模式)。
您也可以按Command+Shift+M (Mac) 或者Ctrl+Shift+M (Windows, Linux) 来切换设备模式。要使用此快捷方式,你的开发者工具窗口需要获取焦点。如果焦点您的可视窗口上,那么将触发Chrome的切换用户快捷方式。
说明
翻译自:https://developers.google.com/web/tools/chrome-devtools/device-mode/
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂