HTML5页面在小米手机上出现适配问题，主要和屏幕尺寸差异、系统浏览器内核特性、默认样式解析规则有关，掌握对应的适配技巧就能有效解决各类显示异常问题。
基础viewport配置
viewport是HTML5适配移动端的基础，小米手机的自带浏览器对viewport的解析遵循标准规则，正确的配置能避免页面默认缩放导致的布局问题。
在HTML的<head>标签中添加如下viewport配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段配置的含义是让页面宽度等于设备宽度，初始缩放比例为1，禁止用户手动缩放，能适配绝大多数小米手机的默认显示需求。如果页面需要支持用户缩放，可以将user-scalable设置为yes，同时调整maximum-scale的值。
响应式布局适配
小米手机的屏幕尺寸从5英寸到7英寸不等，使用响应式布局能根据屏幕尺寸自动调整元素排列和大小。
媒体查询使用
通过CSS媒体查询针对不同尺寸的小米手机设置不同的样式规则，示例如下：
/* 适配小尺寸小米手机，比如5-5.5英寸 */
@media screen and (max-width: 375px) {
.container {
padding: 10px;
}
.title {
font-size: 16px;
}
}
/* 适配中等尺寸小米手机，比如6-6.5英寸 */
@media screen and (min-width: 376px) and (max-width: 414px) {
.container {
padding: 15px;
}
.title {
font-size: 18px;
}
}
/* 适配大尺寸小米手机，比如6.7英寸以上 */
@media screen and (min-width: 415px) {
.container {
padding: 20px;
}
.title {
font-size: 20px;
}
}
弹性布局使用
使用flex布局能让元素在不同宽度的小米手机上自动分配空间，避免固定宽度导致的溢出问题：
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 0 0 48%;
margin-bottom: 10px;
}
字体与尺寸适配
小米手机的系统字体大小和浏览器默认字体渲染规则存在差异，需要统一适配方案。
rem适配方案
rem是相对于根元素字体大小的单位，通过设置根元素的font-size，能让所有使用rem的元素随屏幕尺寸自动缩放，适配不同小米手机：
// 设置根元素字体大小，以设计稿宽度750px为例
function setRemUnit() {
const docEl = document.documentElement;
// 当前屏幕宽度
const width = docEl.clientWidth;
// 设计稿宽度对应的rem基准值，750px设计稿下1rem=75px
const rem = width / 10;
docEl.style.fontSize = rem + 'px';
}
// 初始化执行
setRemUnit();
// 窗口大小变化时重新计算
window.addEventListener('resize', setRemUnit);
// 页面显示时重新计算，避免缓存导致的尺寸错误
window.addEventListener('pageshow', function(e) {
if (e.persisted) {
setRemUnit();
}
});
在CSS中使用rem设置元素尺寸和字体大小：
.title {
/* 设计稿中字体大小为30px，对应30/75=0.4rem */
font-size: 0.4rem;
}
.banner {
/* 设计稿中宽度为750px，对应10rem */
width: 10rem;
height: 3rem;
}
字体渲染优化
小米手机的部分系统版本对字体平滑渲染支持不同，可添加如下CSS优化显示效果：
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "PingFang SC", "MIUI", "Helvetica Neue", sans-serif;
}
兼容性问题处理
小米手机自带浏览器基于Chromium内核，但部分旧版本存在特性支持差异，需要处理兼容问题。
事件兼容处理
小米手机部分旧版本浏览器对touch事件的支持存在偏差，可统一处理事件绑定：
function addEvent(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, handler);
} else {
element['on' + eventName] = handler;
}
}
// 使用示例
const btn = document.getElementById('submitBtn');
addEvent(btn, 'touchstart', function() {
console.log('按钮被触摸');
});
API兼容处理
部分新API在小米旧版本浏览器中不支持，需要做特性检测：
// 检测是否支持localStorage
if (typeof localStorage !== 'undefined') {
localStorage.setItem('test', '1');
} else {
// 降级处理，使用cookie存储
document.cookie = "test=1";
}
常见问题排查
如果HTML5页面在小米手机上出现适配异常，可以按照以下步骤排查：
- 检查viewport配置是否正确，是否遗漏了关键属性
- 检查是否有固定宽度的元素，替换为弹性宽度或百分比宽度
- 检查字体单位是否使用了px，替换为rem或em单位
- 检查是否有浏览器专属CSS属性未添加前缀，比如-webkit-前缀
- 检查JS代码是否存在语法错误，在小米浏览器中调试查看报错信息
按照上述技巧处理，基本能解决HTML5在小米手机上的绝大多数适配问题，保证页面在不同型号的小米设备上都能正常显示和交互。