Device Mode手动缩放页面后手机模式会退出? 翌萌~ 提问于 2026-01-26 16:34:20 阅读 57 工具 在用Chrome的Device Mode调试移动端页面时,每次手动缩放浏览器窗口,手机模拟器模式就会自动退出,只剩桌面视图,这是为啥啊? 我明明按照教程设置了Galaxy S23,调整布局时需要看不同缩放比例的效果,但一放大窗口就变回电脑模式了,试过勾选“Override user agent”和“Emulate display features”都没用,有没有什么隐藏设置能解决这个问题? 我来解答 赞 8 收藏 分享 生成中... 手机扫码查看 复制链接 生成海报 反馈 发表解答 您需要先 登录/注册 才能发表解答 2 条解答 诸葛子香 Lv1 Chrome的Device Mode在手动调整窗口大小时确实会退出手机模拟模式。你应该勾选“Lock viewport”选项,这样就能保持设备视口不变形了。如果找不到这个选项,可以尝试更新Chrome到最新版。 回复 点赞 5 2026-02-06 19:06 IT人昕彤 Lv1 这是个常见的问题,跟Device Mode的触发机制有关。按照Chrome DevTools的规范,Device Mode实际上是通过设置视口宽度和模拟移动设备的行为来工作的。但当你手动调整窗口大小时,实际上打破了这个预设的视口范围,所以它会自动退出模拟模式。 解决方法很简单:勾选 DevTools 里的 Responsive 模式。具体操作是,在Device Mode选择器旁边找到那个“自定义尺寸”的输入框(通常默认写的是1920x1080这种),直接输入你需要的分辨率或者拖动调整。这样即使你缩放页面,也不会退出手机模式了。 另外提醒一下,如果你需要测试不同缩放比例的效果,建议直接用 Ctrl + Plus/Minus 来缩放页面内容,而不是调整窗口大小。这样能更贴近实际的移动端体验。 如果还是有问题,可以检查下是否开启了 Emulate touch events 和其他相关选项,有时候这些选项冲突也会导致奇怪的行为。不过按照官方文档的说法,上面的方法基本就够用了。 回复 点赞 11 2026-01-29 20:40 加载更多 相关推荐 2 回答 81 浏览 dva model状态数据页面刷新后就丢失了怎么办 在用dva开发的时候,我在model里写了状态数据,但页面刷新后所有state都变回初始值了。我尝试在subscriptions里用localStorage保存state: subscriptions... Newb.东江 框架 2026-02-01 07:02:27 1 回答 16 浏览 Umi中使用model的useModel钩子时,为什么组件重新渲染后数据丢失了? 我在Umi项目里用model管理购物车数据,通过useModel获取数据后,页面跳转再返回时发现购物车数据突然清空了,但本地存储里还有记录。尝试过在model里加persist配置和手动写localS... 程哲 框架 2026-02-19 13:07:32 2 回答 66 浏览 Dva中model的reducers为什么无法更新state? 在Dva项目里写了model的reducers,按照文档应该能更新state,但实际修改后页面完全没反应。 比如这样写:updateName(state, { payload: { name }}) ... 皇甫春莉 框架 2026-02-18 11:56:22 2 回答 15 浏览 Umi中useModel获取的状态修改后组件没有重新渲染怎么办? 在Umi项目里用useModel获取模型状态,修改了状态值后页面没更新,控制台也没有报错。比如这个页面: <template> <div> <p>当前计数:{{ c... 梓怡(打工版) 框架 2026-02-15 17:06:29 1 回答 17 浏览 React Strict Mode 下 useEffect 为什么会执行两次? 我在开发时开启了 React 的 Strict Mode,结果发现 useEffect 里的逻辑执行了两次,明明只渲染了一次组件。这是正常现象吗?会不会影响生产环境? 我试过把依赖数组清空,也试过移除... 慕容梓晨 框架 2026-03-02 17:50:20 2 回答 26 浏览 React 开启 Strict Mode 后 useEffect 为啥执行了两次? 我在开发 React 应用时,发现只要在根组件包了 StrictMode,里面的 useEffect 就会执行两次,明明只写了一次逻辑。这是 bug 吗?还是我哪里理解错了? 比如下面这段代码,在控制... 司卿 框架 2026-02-26 16:40:21 2 回答 29 浏览 React 开启 Strict Mode 后 useEffect 被执行了两次,正常吗? 我在开发 React 应用时开启了 Strict Mode,结果发现组件里的 useEffect 在开发环境下执行了两次,导致接口被请求了两遍,这正常吗?我是不是哪里写错了? 这是我的代码: useE... 极客钰曦 框架 2026-02-24 22:45:17 1 回答 64 浏览 React Strict Mode为什么导致useEffect两次执行?代码没问题却报错 我在React组件里用Strict Mode包裹App时,发现useEffect里的API请求执行了两次,控制台还报错说useState未定义。但移除Strict Mode后就正常了,这是为什么? 比... ♫慧慧 框架 2026-02-19 10:09:50 2 回答 31 浏览 Vue表单输入时v-model数据没更新是怎么回事? 在用Vue写表单时,给输入框加了v-model="user.profile.email",但输入内容后数据完全没变,控制台也没报错,这是为什么啊? 我已经初始化了user: { profile: {}... 萌新.子怡 框架 2026-02-17 08:50:33 1 回答 56 浏览 Figma Dev Mode导出的组件样式在React中不生效怎么办? 我用Figma Dev Mode导出的按钮组件CSS,在React项目里直接复制粘贴后样式完全没效果。按钮显示成默认的方形,颜色也没变化。之前按照文档配置了正确的类名,但检查元素发现CSS变量好像没被... Mr-景叶 工具 2026-02-16 04:41:37
解决方法很简单:勾选
DevTools里的Responsive模式。具体操作是,在Device Mode选择器旁边找到那个“自定义尺寸”的输入框(通常默认写的是1920x1080这种),直接输入你需要的分辨率或者拖动调整。这样即使你缩放页面,也不会退出手机模式了。另外提醒一下,如果你需要测试不同缩放比例的效果,建议直接用
Ctrl + Plus/Minus来缩放页面内容,而不是调整窗口大小。这样能更贴近实际的移动端体验。如果还是有问题,可以检查下是否开启了
Emulate touch events和其他相关选项,有时候这些选项冲突也会导致奇怪的行为。不过按照官方文档的说法,上面的方法基本就够用了。