跨端界面要按设备能力分层

封面信息图

设备能力信息只能帮助做温和的默认选择,不能据此给用户贴“低端”标签。deviceMemory、CPU 核数和网络状态在不同浏览器里的可用性、准确性都有限。动效和布局应该随运行状态调整,也必须允许用户自己关掉。

const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
const memory = navigator.deviceMemory;
const mode = reduce || (memory && memory <= 2) ? 'light' : 'full';
document.documentElement.dataset.visualMode = mode;

上例的内存值只是一个提示,不能作为访问限制,也不要上传它来建立用户画像。轻量模式应减少装饰、限制画布像素比,而不删除核心信息。最重要的兼容策略仍是:能力 API 缺失时走安全默认值,用户偏好优先。

Logo

一站式 AI 云服务平台

更多推荐