结论：页面“伸缩”是 viewport 配置缺失、手势拦截不到位、原生缩放未关闭三者叠加所致；必须配齐 initial-scale=1.0、minimum-scale=1.0、maximum-scale=1.0 且 js 在 gesturestart/touchstart 早拦截，app 端还需原生层禁用缩放。
直接说结论：自定义导航栏本身不会导致内容“伸缩”，真正在 iOS 上触发页面缩放、拉伸或内容错位的，是 viewport 配置缺失 + 手势拦截不到位 + 原生层未关闭缩放入口这三者叠加。尤其在 APP 端或 H5 真机上，只靠 CSS 或 Vue 层逻辑完全无效。
为什么自定义导航栏后页面会“伸缩”
这不是导航栏组件的问题，而是 iOS WebView 对 viewport 的解析机制被触发了——只要用户双指触屏、双击、快速滑动顶部区域，系统就可能启动缩放逻辑，把整个 <webview></webview> 内容按比例拉伸。此时你写的 custom-nav-bar 会被一起放大/缩小，看起来像“导航栏在动”，实际是整个渲染层在缩放。
- 常见错误现象：iOS 真机上轻点两下标题区域，页面突然变大；双指张开，导航栏文字糊成一片；滚动到顶部再下拉，页面整体上浮一截
- 根本原因：没配全
meta的三要素，且 JS 拦截没抢在 gesturestart 之前执行 - APP 端更严重：WebView 初始化时若没关掉原生缩放（如 Android 的
setSupportZoom(false)），前端 JS 拦截可能被绕过
必须配齐的 viewport 三要素
只写 user-scalable=no 是最常见误区，iOS Safari 会直接忽略。必须同时声明以下三个参数，缺一不可：
-
initial-scale=1.0：显式锁定初始缩放比，不写的话 iOS 可能按设备像素比自动放大 -
minimum-scale=1.0和maximum-scale=1.0必须成对出现，单写maximum-scale有时仍允许微调 - 完整写法示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意：这段 meta 要放在 index.html 的 中，不能只塞进某个页面的 <template></template> 里；nvue 页面完全不读这个标签，需走原生配置。
JS 手势拦截必须早于第三方库执行
仅靠 meta 是被动防御，iOS 上最稳的方式是在手势冒泡前就 preventDefault()。重点掐住两个路径：
-
gesturestart：双指缩放的起点事件，直接干掉：document.addEventListener('gesturestart', e => e.preventDefault()) -
touchstart：判断是否多点触控，不能等touchend再数点数（异步延迟会导致漏判）：document.addEventListener('touchstart', e => { if (e.touches.length > 1) e.preventDefault() }) - 这段代码要尽早执行——推荐放在
main.js最顶部，或页面onLoad第一行；必须早于 uView、uv-ui 等 UI 库的手势初始化逻辑
APP 端还要关死原生层缩放开关
前端 JS 是补救手段，APP 端真正生效得靠原生容器配置：
- 在
pages.json的页面style中加："app-plus": { "navigationStyle": "custom", "titleNView": false }，避免原生导航栏透出缩放控件 - Android：确认
manifest.json中 WebView 是否调用了setSupportZoom(false)；HBuilderX 默认不开启，需手动在原生插件或uni-app的nativePlugins中配置 - iOS：检查
Info.plist是否禁用了allowInlineMediaPlayback等可能间接影响缩放行为的选项（虽不直接相关，但某些厂商 SDK 会联动）
最后提醒：nvue 页面完全不走 WebView，meta 和上述 JS 全部无效，只能通过原生层配置或自定义渲染引擎控制缩放行为——这点最容易被忽略，调试时切记确认当前页面类型。
