如何用JavaScript/CSS判断设备物理尺寸？实现SVG响应式适配小设备

嘿，针对你开发带SVG的网页时遇到的小设备显示问题，我整理了几个前端圈常用的最佳实践方案，帮你快速解决：

首先说结论：CSS媒体查询是处理这类需求的首选方案——不需要额外写JS，符合现代响应式设计的思路，而且能精准针对小设备调整SVG样式。下面分两部分详细讲：

一、用CSS媒体查询调整SVG（推荐） #

1. 先让SVG本身具备响应式基础 #

很多人忽略这一步：给SVG加上viewBox属性，别硬写固定的width和height。比如：

<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
  <!-- 你的图形元素 -->
</svg>

• viewBox定义了SVG的画布坐标系统（这里是100x100的区域），让SVG能跟着容器自由缩放。
• preserveAspectRatio控制缩放时的比例：meet是保持比例并完整显示图形，slice是裁剪图形填满容器，你可以根据需求选。

2. 针对小设备调整SVG样式 #

用媒体查询设置断点，比如针对视口宽度≤768px的设备（手机、平板），调整SVG的大小甚至内部元素：

/* 桌面端默认样式 */
svg {
  width: 400px;
  height: auto;
}

/* 小设备断点 */
@media (max-width: 768px) {
  svg {
    width: 100%; /* 占满父容器宽度 */
    max-width: 300px; /* 限制最大尺寸，避免在大屏手机上太夸张 */
  }
  /* 还能调整SVG内部的元素，比如缩小文字、变细线条 */
  svg .graph-text {
    font-size: 12px;
  }
  svg .graph-line {
    stroke-width: 1.5;
  }
}

如果想更贴近物理设备尺寸（比如专门针对手机屏幕，不管用户怎么缩放窗口），可以用物理单位的媒体查询：

/* 针对物理宽度≤5英寸的设备 */
@media (max-device-width: 5in) {
  svg {
    width: 90vw;
  }
}

不过要注意：物理单位的准确性依赖设备的DPI设置，大部分现代设备都能正确识别，但不是100%精准，不过完全满足你“粗略判断”的需求。

二、用JavaScript判断小设备（当需要逻辑处理时） #

如果需要动态修改SVG内容、加载不同版本的SVG，就需要用JS来判断。这里有两种常用方法：

1. 用window.matchMedia匹配媒体查询（推荐） #

这种方法能直接复用你CSS里的断点逻辑，保持前后端判断一致：

// 匹配小设备断点（和CSS里的max-width对应）
const isSmallDevice = window.matchMedia('(max-width: 768px)').matches;
// 或者匹配物理尺寸
const isSmallPhysicalDevice = window.matchMedia('(max-device-width: 5in)').matches;

if (isSmallDevice) {
  // 调整SVG：比如修改宽度
  const svg = document.querySelector('svg');
  svg.style.width = '90vw';
  // 或者修改内部元素的属性
  svg.querySelector('.graph-text').setAttribute('font-size', '12');
}

// 还能监听窗口缩放，动态切换样式
window.matchMedia('(max-width: 768px)').addEventListener('change', (e) => {
  if (e.matches) {
    // 进入小设备模式，做对应调整
  } else {
    // 回到桌面端，恢复样式
  }
});

2. 读取屏幕物理尺寸 #

通过window.screen和devicePixelRatio粗略计算设备的物理尺寸：

// 计算屏幕物理宽度（英寸）：屏幕像素宽度 / 设备像素比 / CSS默认每英寸像素数（96）
const screenWidthInch = window.screen.width / window.devicePixelRatio / 96;
// 粗略判断：宽度≤5英寸就算小设备
if (screenWidthInch <= 5) {
  // 处理SVG的逻辑
}

这个方法是粗略估计，因为不同设备的实际DPI可能和默认的96有差异，但足够满足你的需求。

三、最佳实践总结 #

1. 优先用CSS媒体查询：简单高效，不需要JS，是响应式设计的标准做法。
2. 一定要给SVG加viewBox：这是SVG能响应式的基础，别硬写固定宽高。
3. 断点选择：优先用视口宽度（max-width），因为用户可能在桌面端缩小窗口；如果要专门针对物理设备，再用max-device-width或物理单位。
4. JS只做必要的逻辑：只有当需要动态修改SVG内容、加载不同资源时才用JS，尽量用matchMedia复用CSS断点，保持逻辑一致。

内容的提问来源于stack exchange，提问作者Nathan Perigreth