格式兼容性优先使用跨平台支持的格式JPG照片,PNG透明背景图SVG图标矢量图,谨慎使用WebP格式虽体积小,但老旧浏览器如IE不支持,若使用需提供降级通过JS判断,不支持时自动加载JPG版本,尺寸与缩放适配图片宽度不超过容器最大宽度,手机端容器宽320px图片宽度设为100%避免溢出,保持图片设置避免拉伸变形正方形图片被压缩为长方形。
加载稳定性图片路径正确避免404图片,且服务器支持跨域加载防图片在部分浏览器中被拦截,为图片添加alt属性企业前台实景图,当图片加载失败时用户能通过文字了解内容,视频与音频确保可播放控制正常,多媒体内容需在不同设备和浏览器中实现基础播放功能,格式与编码兼容视频优先用MP4格式编码,音频优先用MP3格式这两种格式在主流浏览器,和移动端中支持度最高避免使用仅特定浏览器,支持的格式WebM在部分Safari中不支持。
播放控制适配器控件、播放、暂停、进度条、音量、在各设备中可见且可操作,手机端触摸控件能响应,桌面端鼠标点击有效支持全屏播放,且退出全屏后页面布局不混乱,加载与兼容性处理视频设置预加载或按需加载,避免浪费带宽对不支持HTML5视频的老旧浏览器IE8及以下,提供文字提示您的浏览器不支持视频播放请升级。
表格与数据保证结构清晰查看便捷,表格类内容、产品参数、价格表需解决小屏幕显示混乱问题,响应式适配小屏幕手机中表格可横向滚动,设置避免单元格内容挤压重叠,复杂表格可在移动端自动拆分为“键值对”形式参数名参数值提升可读性,样式一致性边框单元格间距在各浏览器中显示一致,避免中边框细中边框粗,表头固定设置滚动表格时表头不消失,方便对照数据。
特殊内容覆盖交互与动态元素模板中可能包含动态内容、如表单、图标、动画、需确保功能正常表单元素,输入框下拉菜单复选框在各浏览器中样式统一,可通过CSS重置默认样式表单验证提示,手机号格式错误在不同设备中可见,避免被键盘遮挡图标与符号,使用字体图标时确保字体文件加载成功,避免显示方块乱码特殊符号如√、×、★用编码避免在部分系统中显示异常,动态效果简单动画变色平滑滚动使用CSS实现,兼容性优于JS动画复杂交互如弹窗、轮播确保在各浏览器中触发逻辑一致,轮播在中自动播放中也能正常运行。