如何检测iOS Safari是否开启大文本缩放？解决devicePixelRatio无效问题

问题背景 #

在Firefox或Chrome浏览器中，window.devicePixelRatio会返回与当前页面缩放对应的数值，常见值包括：

// 4.0
// 3.3333333333333335
// 3.0
// 2.6086956521739134
// 2.2222222222222223
// 2.0
// 1.8181818181818181
// 1.5789473684210527
// 1.3333333333333333
// 1.0
// 0.6

但在iOS Safari浏览器中，该值始终固定为设备的基础物理像素比（如部分设备固定为2.0），无法直接通过它判断用户是否开启了大文本缩放功能（正常未缩放时，devicePixelRatio应为4.0这类高值）。

解决方案 #

方法1：通过元素渲染尺寸计算实际缩放比例 #

创建一个已知CSS尺寸的隐藏元素，对比其实际渲染尺寸与定义尺寸的比例，推算当前页面缩放系数：

function getActualZoomRatio() {
  const testEl = document.createElement('div');
  testEl.style.width = '100px';
  testEl.style.height = '1px';
  testEl.style.position = 'absolute';
  testEl.style.top = '-1000px'; // 隐藏到视口外，不影响页面布局
  document.body.appendChild(testEl);

  const actualWidth = testEl.offsetWidth;
  document.body.removeChild(testEl);

  // 计算缩放比例：实际渲染宽度 / CSS定义宽度
  return actualWidth / 100;
}

// 使用示例
const zoomRatio = getActualZoomRatio();
console.log('当前页面缩放比例:', zoomRatio);
// 若结果明显大于1，说明用户开启了页面放大或大文本缩放

方法2：聚焦文本缩放的专项检测 #

利用em单位随文本缩放变化的特性，结合JavaScript测量判断：

1. 先添加CSS样式：

.text-zoom-detector {
  position: absolute;
  width: 1em;
  height: 1px;
  top: -1000px;
  visibility: hidden;
}

2. 再通过JS测量计算：

function isLargeTextZoomEnabled() {
  const detector = document.createElement('div');
  detector.className = 'text-zoom-detector';
  document.body.appendChild(detector);

  const computedWidth = parseFloat(window.getComputedStyle(detector).width);
  document.body.removeChild(detector);

  // 浏览器默认1em通常对应16px，若测量值远大于16则判定为开启大文本缩放
  return computedWidth > 17.6; // 1.1倍阈值，可根据需求调整
}

// 使用示例
const hasLargeTextZoom = isLargeTextZoomEnabled();
console.log('是否开启大文本缩放:', hasLargeTextZoom);

补充说明 #

• 方法1适用于检测整体页面缩放，方法2更精准针对文本缩放场景，可按需选择；
• 无需依赖window.devicePixelRatio，完全规避iOS Safari的兼容性问题；
• 阈值可根据产品实际需求调整，确保判断逻辑符合用户场景。

内容的提问来源于stack exchange，提问作者Andrew Arrow