Redmi手机HTML5适配问题源于MIUI默认策略与标准不一致：需手动启用touch事件权限、显式声明viewport、补充特有断点（如393px）、改用file://本地调试并避开MIME拦截。
Redmi手机对HTML5支持整体良好，但部分机型（如Note 7 Pro、K90系列）存在viewport识别偏差、touch事件拦截、媒体查询断点缺失等典型适配问题——不是HTML5不兼容，而是默认渲染逻辑和屏幕特性没对齐。
检查并强制启用Touch Events与JavaScript
Redmi机型（尤其搭载MIUI 14+的K90/Note 11 Pro）默认可能限制第三方页面的触摸事件监听，导致滑动轮播、Canvas绘图无响应。这不是禁用，而是权限策略收紧。
- 在Chrome for Android中：点击右上角三点 →
设置→网站设置→ 确保JavaScript开启 - 继续在
网站设置→权限→ 找到传感器或运动传感器→ 设为允许（MIUI常将touchstart归入此类） - 重启浏览器后，在页面中运行
console.log('touch supported:', 'ontouchstart' in window);验证返回true
viewport必须显式声明，且避免依赖自动推导
Redmi Note 7 Pro实测 window.screen.width 返回 393px（非标准DPR换算值），导致未设 viewport 的页面被按桌面模式渲染，文字糊、按钮小、触控热区错位。
- 务必在
<head>中插入：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- 若无法改源码，可在URL末尾加参数强制修正：
https://example.com/app.html?viewport=width=device-width,initial-scale=1.0 - 清除浏览器缓存再刷新——MIUI自带浏览器常缓存旧viewport策略
媒体查询需覆盖Redmi特有宽度断点
Redmi多款机型（Note 7 Pro、K90、Note 11 Pro）采用非标准CSS像素宽度（如393px、412px），仅靠 @media (max-width: 768px) 不足以覆盖，会导致布局坍塌或元素错位。
立即学习“前端免费学习笔记（深入）”；
- 在SCSS或CSS中补充针对性断点：
@media only screen and (width: 393px) { /* Redmi Note 7 Pro */ } - 更稳妥做法是用设备像素比 + 宽度组合：
@media only screen and (min-width: 360px) and (-webkit-device-pixel-ratio: 2.75) { /* K90 Pro常见DPR */ } - 避免只写
width单一条件，加orientation判断防横屏失效：@media (width: 393px) and (orientation: portrait)
离线调试优先走file://协议，绕过MIME拦截
Redmi手机内置浏览器（尤其MIUI 13/14）对本地file://加载的HTML5页面有额外安全策略，若服务器未正确返回 Content-Type: text/html，JS/CSS可能被静默阻断。
- 将HTML/CSS/JS资源打包成完整文件夹，传至手机
/Download/目录 - 用系统「文件管理器」打开该HTML文件，而非通过浏览器地址栏输入
file:///sdcard/Download/xxx.html - 若仍报错
Refused to execute script from 'file:///'，说明浏览器主动拦截——此时应换用Chrome或Firefox for Android调试
真正卡住开发的，往往不是“Redmi不支持HTML5”，而是它把 touchstart 当传感器权限管、把 393px 当正常视口宽、把 file:// 当高危协议拦——适配的本质，是提前对齐这些隐性规则。
