360极速浏览器适配需强制 viewport 锁定缩放、js 动态设 rem 基准、媒体查询分档设 1px 边框、手动按 dpr 加载高清图，真机调试不可替代。
viewport 设置必须加 user-scalable=no 才能防止 360 极速浏览器双击缩放失灵
360 极速浏览器（尤其旧版）对 viewport 的解析较松散，仅写 width=device-width, initial-scale=1.0 时，用户双击图片或文字区域仍可能触发意外缩放，导致布局错乱、按钮点不中。这是 360 系机型上最常复现的“伪适配”问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制锁定缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 若需保留 pinch-zoom（如地图/图片查看），改用
minimum-scale=1.0, maximum-scale=1.0替代user-scalable=no，更稳妥 - 注意：360 浏览器部分版本会忽略
initial-scale，所以maximum-scale=1.0是关键兜底项
rem 基准值不能硬写 100px——360 手机实际设备宽度差异大，要用 JS 动态算
360 手机型号繁杂（如 N6、N7、U1 等），屏幕 CSS 宽度从 320px 到 414px 不等，且部分机型上报的 screen.width 和 document.documentElement.clientWidth 不一致。直接按 320px 设计稿写死 html { font-size: 100px }，在 360 U1（390px 宽）上会明显撑出横向滚动条。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 按真实视口宽度动态设置：
function setRootFontSize() { const width = document.documentElement.clientWidth || window.innerWidth; // 以 375px 为基准，1rem = 100px → 此时 1px = 0.2667rem document.documentElement.style.fontSize = (width / 375) * 100 + 'px'; } setRootFontSize(); window.addEventListener('resize', setRootFontSize); - 避免用
screen.width（返回物理分辨率，360 N6 是 1080，但 CSS 宽度是 390） - 务必在
中尽早执行该脚本，防止 FOUC（样式闪动）
1px 边框在 360 高清屏上发虚？别信 -webkit-transform: scale(0.5)
360 手机普遍采用高 DPR 屏幕（如 N7 是 DPR=2.5），但其内核（Chromium 69+）对 transform: scale() 的 subpixel 渲染支持不稳定，用 scale(0.5) 实现 1px 边框时，常出现模糊、断线、偏移等问题。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 改用媒体查询 +
border-width分档控制：@media (-webkit-min-device-pixel-ratio: 2.5) { .border-1px { border-width: 0.4px; } } @media (-webkit-min-device-pixel-ratio: 2) { .border-1px { border-width: 0.5px; } } - 更可靠方案：用伪元素 +
background-image: linear-gradient()模拟 1px 线，完全绕过 border 渲染缺陷 - 切记：360 浏览器不支持
border-image的高清缩放 fallback，慎用
图片加载异常？360 极速浏览器默认禁用 srcset 和 picture
360 极速浏览器（截至 2025 年底最新版）仍默认关闭对响应式图片标准的支持，<img srcset="..." alt="HTML5如何适配360手机_HTML5在360机型中的适配方案【操作】" > 和 <picture></picture> 标签会被降级为只加载 src，导致在 360 N7（DPR=2.5）上加载低清图、图片模糊。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 手动检测并注入高清资源：
if (window.devicePixelRatio > 1.5) { const img = document.querySelector('img[data-src]'); const hdSrc = img.dataset.src.replace(/\.([a-z]{3,4})$/, '@2x.$1'); img.src = hdSrc; } - 给所有关键图片加
data-src属性，JS 启动时按 DPR 动态赋值src - 禁止依赖
picture的media属性做 DPR 切换——360 浏览器不识别(min-resolution: 2dppx)
360 手机适配真正的难点不在“能不能显示”，而在“是否稳定渲染”：它的内核行为介于 Chrome 和 Android WebView 之间，很多看似通用的 H5 方案（如 lib-flexible、postcss-pxtorem 默认配置）会在某些机型上静默失效。每次上线前，务必用真机连 360 极速浏览器调试，别信模拟器的 DPR 报告。
