如何在HTML5中通过DeviceMemory获取内存等级以决定加载高清资源-H5教程-PHP中文网

devicememory 是 navigator 对象的只读属性，返回设备近似内存容量（gb），用于资源分级策略；常见值为0.25–8，需兼容 undefined 并联合 connection.effectivetype 等判断。

如何在html5中通过devicememory获取内存等级以决定加载高清资源

DeviceMemory 是 HTML5 提供的一个只读属性，位于 navigator 对象下（即 navigator.deviceMemory），用于获取设备的近似内存容量（单位为 GB）。它可用于客户端做轻量级资源分级策略，比如在低内存设备上避免加载高清图片、视频或大型 JS 模块。

获取并判断 deviceMemory 值

该属性返回一个数字，常见值有 0.25、0.5、1、2、4、8（对应 256MB、512MB、1GB、2GB、4GB、8GB），但实际值取决于浏览器实现与系统报告精度，部分设备可能返回 undefined 或不支持。

需先检测是否可用，避免报错
建议设置安全兜底（如默认按中等内存处理）
注意：该值是只读估算，不能精确反映当前可用内存

典型资源加载策略示例

可根据 deviceMemory 动态选择图片 srcset、视频码率、或懒加载粒度：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

≤ 1GB（如 0.5 或 1）：加载 WebP 格式 + 720p 图片，禁用自动播放视频，延迟非关键 JS
≥ 2GB（如 2、4、8）：启用 4K 图片、AVIF、高帧率视频、预加载首屏关键资源
未定义或小于 0.25 时，强制降级为极简模式（如纯 SVG + 文本）

代码片段（兼容性处理）

以下是一个安全读取并应用的最小实践：

const getMemoryTier = () => {
  const mem = navigator.deviceMemory;
  if (mem === undefined) return 'unknown';
  if (mem 

<h3>注意事项与局限</h3>
<p><code>deviceMemory</code> 不是实时指标，也不代表当前内存压力，仅作粗略设备能力参考：</p>