夸克导航栏错位的问题，根源是系统在折叠屏展开时连续触发两遍 viewport 重计算。

但夸克没有同步更新 visualViewport 的缩放值。

结果就是：

• CSS 媒体查询的断点与物理宽度对不上
• Flex 容器尺寸“冻结”在折叠态窄屏的值上
• 地址栏截断、工具栏偏移、内容横向溢出——这些现象本质都是同一个原因

先理清底层逻辑，再看具体解决步骤。

确认设备处于真实展开状态

动手前先做一件事：从屏幕顶部下滑通知栏，看状态栏是否有“展开模式”字样。

如果只看到“折叠屏”但没有这个状态提示，说明系统还没广播 display change 事件。

也就是说，你的所有操作都运行在错误的视口上下文中。这一步不能跳过，后面所有步骤都依赖它判断环境是否就绪。

禁用实验性渲染 Flag 并强制内核重启

LayoutNG 和 Scroll Unification 这两项实验性功能，在折叠屏多窗口场景下会“抢” layout 的触发时机，直接覆盖框架对 display: flex 容器宽度的计算结果。

导航栏图标间距和搜索框自适应宽度，就是被它们搞乱的。

操作路径如下：

• 在夸克地址栏输入 quark://flags 并回车
• 分别搜索并定位三项：LayoutNG、Scroll Unification、Preferred OOM Score
• 将这三项全部手动设为 Disabled（千万别选 Default，选则无效）
• 滚动到底部点击“重启夸克浏览器”，等进程完全退出后自动重开

注入动态 viewport 锁定脚本

接下来是核心操作。分为两种方法：一种适合临时解决单个页面，另一种可作为全局方案反复使用。

方法一：单页临时修复

确保页面已加载完成。在地址栏清空 URL 后粘贴执行这段脚本：

ja vascript:(function(){const v=document.querySelector('meta[name="viewport"]');if(v)v.setAttribute('content','width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover');else{const n=document.createElement('meta');n.name='viewport';n.content='width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover';document.head.appendChild(n);}})();

执行完立刻刷新页面，否则脚本不会生效。

方法二：全局拦截缩放劫持

进入夸克设置 → 高级设置 → 开发者选项，先开启“允许运行本地 JS”。

然后，访问任意网页时长按地址栏，选择“添加书签”。名称填“锁视口”，网址栏粘贴上面那段脚本，保存。

以后碰到类似问题，点击这个书签就能一键注入，不用每次复制粘贴。

关闭智能排版与字体自适应

这两个开关是“万恶之源”的帮凶。

点击地址栏右侧的“AA”图标，把“智能排版”和“字体自适应”都关上。随后回到网页，双指轻轻捏合缩放一次再松开——目的是触发一次 layout 重排。

此时观察导航栏高度和段落行距是否恢复正常。

必须强调：不关闭这两项，夸克会持续监听 window.innerWidth 的变化。 折叠屏展开瞬间 innerWidth 从 672px 跳到 1440px，样式层就会一直反复重绘，根本稳定不下来。

切换为桌面版网站并清除 UA 缓存

很多网页在检测到折叠屏 UA 时，会自动加载一套精简排版逻辑（比如 rem 适配库）。这套逻辑在展开后的宽屏下不仅没用，还会帮倒忙。

进入目标网页后，点击地址栏左侧的网站图标，选择“请求桌面版网站”，等待页面重载。

然后，进入“设置”→“隐私与安全”→“清除浏览数据”，勾选“Cookie 及其他网站数据”和“托管应用数据”，时间范围选“所有时间”，点击清除。

这套组合拳打完，正常情况下导航栏错位、地址栏截断之类的问题就彻底解决了。

《夸克》非常好用的免费AI浏览器

下载APP查看