［移动端H5开发］webp兼容

这段代码实现了移动端H5开发中针对WebP格式图片的兼容性处理，核心逻辑是根据Android系统版本决定是否使用WebP格式。以下是对代码的详细解析和优化建议：

代码解析

版本检测函数 checkAndroidVersion()：
通过正则表达式 /Androids*(d+.?d?)/i 从 navigator.userAgent 中提取Android版本号
将版本号转换为数字后与4.4比较（KitKat是WebP原生支持的起点）
返回布尔值表示是否为高版本Android
全局变量设置：
window.isAdvanceAndroid = checkAndroidVersion();window.WEBP = isAdvanceAndroid ? 'webp' : 'png';
根据检测结果设置图片格式后缀
同时为低版本设备添加 low-version 类名到body

潜在问题

版本号处理缺陷：
当前正则无法处理类似 Android 10 这样的多位数版本
版本号比较存在隐式类型转换（Number("5.1.1") → 5.1）
兼容性扩展性不足：
仅针对Android系统，未考虑iOS或其他系统的WebP支持情况
iOS从iOS 14开始才全面支持WebP

优化建议代码/ * 增强版WebP兼容性检测 * @returns {Object} 包含格式后缀和版本信息的对象 */function checkWebPSupport() { const ua = navigator.userAgent; let isAdvance = true; let format = 'webp'; // Android检测（支持多位数版本） const androidMatch = ua.match(/Androids*(d+)(?:.(d+)(?:.(d+))?)?/i); if (androidMatch) { const major = parseInt(androidMatch[1] || 0); const minor = parseInt(androidMatch[2] || 0); // 4.4以下或特定需要降级的版本 if (major < 4 || (major === 4 && minor < 4)) { isAdvance = false; format = 'png'; } document.body.classList.toggle('low-version', !isAdvance); return { format, isAdvance, platform: 'android' }; } // iOS检测 const iosMatch = ua.match(/iPhone OS (d+)_(d+)/i); if (iosMatch) { const major = parseInt(iosMatch[1]); if (major < 14) { isAdvance = false; format = 'png'; } return { format, isAdvance, platform: 'ios' }; } // 其他系统默认支持WebP（可通过Modernizr等库增强检测） return { format, isAdvance: true, platform: 'other' };}// 使用示例const webpSupport = checkWebPSupport();window.WEBP = webpSupport.format;最佳实践建议

多格式回退方案：
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.png" alt="示例图片"></picture>
动态加载检测（更准确）：
function canUseWebP() { return new Promise(resolve => { const webP = new Image(); webP.onload = webP.onerror = () => { resolve(webP.height === 2); }; webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; });}
CSS配合方案：
.low-version .webp-bg { background-image: url('fallback.png');}

性能考虑

将检测结果缓存到localStorage避免重复检测
对于不支持WebP的设备，考虑使用SharpP或WASM解码器（需评估性能影响）

这段优化后的代码提供了更全面的系统检测和更健壮的版本号处理，同时保持了原有代码的简洁性。实际项目中建议结合特性检测（如Modernizr）和服务器端用户代理分析来实现最佳兼容性方案。

您可能感兴趣问答

Collapsible

热门标签

热点问答