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