能否关闭Chrome DevTools后保持设备模式开启？参考Firefox实现

阿华AIGC实验室

2026-5-22

如何在关闭Chrome DevTools后维持设备模式开启？

嘿，这个问题我之前也折腾过！Chrome本身确实不像Firefox那样有直接的选项让你关闭DevTools后还保留设备模式，但有几个实用的替代方案，我给你梳理下：

方法一：用Chrome命令行启动参数强制开启移动模拟

这个方法能让Chrome每次启动就自动进入指定的设备模拟状态，就算DevTools完全关闭也不会失效。

Windows操作步骤：
右键Chrome快捷方式 → 点击「属性」→ 在「目标」输入框的末尾（注意要和原内容留一个空格）添加类似这样的参数：
```
--mobile-emulation=width=375,height=667,device-pixel-ratio=2
```
你可以把width、height和device-pixel-ratio换成你常用的设备参数（比如iPhone 14的尺寸是390x842，像素比3）。
Mac/Linux操作步骤：
打开终端，用以下命令启动Chrome（以Mac为例，路径可能需要根据你的安装位置调整）：
```
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --mobile-emulation=width=375,height=667,device-pixel-ratio=2
```

启动后，Chrome窗口会自动模拟你指定的移动设备尺寸和像素比，完全不需要打开DevTools。

这个方法是通过强制页面渲染尺寸来模拟设备模式，适合临时快速预览页面适配效果：

先开启Chrome的DevTools实验性功能：打开chrome://flags/#enable-devtools-experiments，选择「启用」后重启Chrome。
打开DevTools，点击右上角的设置图标 → 进入「Experiments」选项卡，勾选「Allow custom UI themes」。
找到Chrome的用户样式文件夹：
- Windows：%LOCALAPPDATA%\Google\Chrome\User Data\Default\User StyleSheets
- Mac：~/Library/Application Support/Google/Chrome/Default/User StyleSheets
- Linux：~/.config/google-chrome/Default/User StyleSheets
编辑文件夹里的Custom.css文件，添加以下代码（按需修改尺寸参数）：
```
@media screen {
  html {
    max-width: 375px !important;
    height: 667px !important;
    margin: 0 auto !important;
    device-width: 375px !important;
  }
}
```
保存后重启Chrome，页面就会自动按照你设置的尺寸渲染了。