vivo X系列浏览器因Chromium内核老旧（v84–v90）导致ES6+语法、startsWith/endsWith、window.open及touch事件兼容性问题，需降级语法、替换API、显式设置passive:false并动态修正viewport。
HTML5 在 vivo X 系列（如 X Fold5、X Ultra、X Note）上基本能正常运行，但部分 ES6+ 语法和浏览器行为差异会导致白屏、交互失灵或触控无响应——这不是“不支持 HTML5”，而是 vivo 自研浏览器（基于 Chromium 但版本滞后、API 裁剪）对现代 JS 特性兼容性不足。
let/const 和箭头函数导致脚本中断
vivo X 系列默认浏览器（尤其系统预装版）仍使用较旧 Chromium 内核（实测多为 v84–v90），let、const、() => {} 在某些机型上会直接报 SyntaxError: Unexpected token 'const' 或静默失败。
- 把所有
let foo = ...改成var foo = ... -
window.init = () => { ... }必须重写为window.init = function() { ... } - 避免在全局作用域用块级作用域声明，例如不要在
顶层写if (x) { let y = 1; }—— 即使加了 Babel，vivo 浏览器的解析器也可能提前报错
字符串方法 startsWith/endsWith 不可用
vivo X 系列浏览器未实现 String.prototype.startsWith 和 endsWith，调用时抛出 TypeError: str.startsWith is not a function。
- 用
str.indexOf(prefix) === 0替代str.startsWith(prefix) - 用
str.lastIndexOf(suffix) === str.length - suffix.length替代str.endsWith(suffix) - 注意：不要用
str.indexOf(...) > 1（原资料有误），那是错的——正确是=== 0，否则会漏掉开头匹配
window.open() 被拦截且无提示
vivo 浏览器对 window.open() 执行极其严格：非用户手势触发（如 setTimeout 里调）、无协议前缀（如 http://）、或目标为 _blank 时，会静默失败，控制台也无 warning。
立即学习“前端免费学习笔记（深入）”；
- 优先改用
window.location.href = "https://xxx"实现页面跳转 - 若必须新开窗口（如支付回调页），确保绑定在
touchend或click回调内，且不经过 Promise.then 或 async/await 延迟 - 避免用
window.open('', '_blank')空地址，vivo 浏览器会直接拒绝
触摸事件监听失效或延迟
即使写了 element.addEventListener('touchstart', ...)，在 vivo X 系列上可能完全不触发，或首次触摸延迟 300ms+——本质是浏览器未启用标准 Touch Events API，或启用了但禁用了 passive 模式下的默认行为拦截。
- 务必在监听时显式传
{ passive: false }：element.addEventListener('touchstart', handler, { passive: false }); - 避免依赖
event.touches[0].clientX后立即做 DOM 操作；先用requestAnimationFrame缓一帧再取值，防止因渲染管线不同步导致坐标为 0 - 测试时别只看 Chrome DevTools 远程调试——它会模拟桌面行为；真机用
console.log('touchstart')+ 手机浏览器地址栏输入javascript:alert(1)确认 JS 确实执行
最易被忽略的一点：vivo X 系列部分机型（尤其是 X Fold5 折叠屏）在展开/合盖状态切换后，viewport 会重置，导致 width=device-width 失效。此时仅靠 meta 标签不够，必须配合 JS 动态重设：document.querySelector('meta[name=viewport]').setAttribute('content', 'width='+window.screen.width)，并在 resize 和 orientationchange 事件中监听修正。
