Ulefone手机适配无需特殊处理，只需遵循通用移动端规范：正确设置viewport、动态计算rem、安全区降级兼容、禁用电话自动识别，并避免机型枚举，专注viewport+rem+flex+fallback四件套。
Ulefone 手机不是特殊终端，HTML5 适配它不需要单独处理——只要遵循通用移动端适配规范，就能在 Ulefone（如 Armor系列、Power系列）上正常显示和交互。
viewport 设置必须写对，否则直接“放大镜式错位”
Ulefone 多数机型（如 Armor 12、Power 6）屏幕宽度为 720px / 1080px / 1200px，DPR 常见为 2 或 3。若 viewport 写成 width=320 或漏掉 initial-scale=1.0，页面会强制缩放，文字模糊、按钮错位、点击区域偏移。
- ✅ 正确写法：
- ❌ 错误写法：
（硬设 320px，无视真实设备宽度） - ⚠️ 注意：
target-densitydpi=device-dpi已被 Chrome 和 Android WebView 废弃，加了反而可能触发兼容模式降级
rem 布局要动态计算，别用固定 font-size
Ulefone 部分中低端机型（如 Armor Mini）使用老旧 Android 系统（Android 8–10），对 calc() 或 vh 支持不稳定，但 rem 兼容性极好（Android 2.1+、iOS 5+ 都支持）。关键在于：不能写死 html { font-size: 37.5px; }，而要按设备宽度实时算。
- 设计稿基准宽建议统一用
375px（iPhone SE）或750px（主流 UI 设计稿），避免用 320px（已过时） - JS 动态设置示例（放在
中尽早执行）：function setRem() { const baseWidth = 375; // 设计稿宽度 const scale = document.documentElement.clientWidth / baseWidth; document.documentElement.style.fontSize = scale * 100 + 'px'; } setRem(); window.addEventListener('resize', setRem); - ⚠️ 容易踩坑：未监听
orientationchange，横屏时 rem 基准不重算 → 字体突然变大/变小
安全区（safe-area）适配要兼容非 iPhone 设备
Ulefone Armor 系列有超厚边框和圆角屏，但**不支持 iOS 的 env(safe-area-inset-top)**，强行使用会导致顶部留白异常或样式崩溃。需降级处理：
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全写法：只在 iOS 上启用 safe-area，其他设备 fallback 为固定值
.header { padding-top: 20px; padding-top: env(safe-area-inset-top, 20px); } - ❌ 危险写法：
height: env(safe-area-inset-top)直接当高度用 → Android 设备解析为auto，布局塌陷 - ? 提示：Ulefone 没有刘海/挖孔统一规范，建议用 JS 检测
window.screen.height > window.screen.width+ 用户代理粗筛，再决定是否加 placeholder
避免“电话号码自动识别”这类安卓通病
Ulefone 运行原生 Android，部分系统（尤其定制版）会把连续数字（如 400、138xxxx）渲染成可点击电话链接，破坏表单或展示逻辑。
- ✅ 全局禁止：
- ✅ 局部控制：给含数字的容器加
style="text-rendering: optimizeLegibility;"或用零宽空格断开（13812345678） - ⚠️ 注意：
telephone=no在部分旧版 Android WebView 中无效，此时需配合 CSSa[href^="tel:"] { pointer-events: none; color: inherit; }
真正卡住 Ulefone 适配的，往往不是它本身，而是开发者沿用了只测 iPhone 的惯性——比如用 device-width: 375px 媒体查询覆盖所有“小屏”，却忽略了 Ulefone Armor 10 是 1080×2400（DPR=2.75）。务实做法是：放弃机型枚举，专注 viewport + rem + flex + 安全 fallback 四件套，再辅以真机测试（至少覆盖 720p/1080p/1200p 三档分辨率）。
