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

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

设备能力信息只能帮助做温和的默认选择，不能据此给用户贴“低端”标签。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 缺失时走安全默认值，用户偏好优先。