移动端页面缩放问题：Safari下zoom属性不影响font-size的解决办法

方案1：使用 transform: scale() 替代 zoom（跨Safari/Chrome兼容） #

transform: scale() 是标准CSS属性，Safari完全支持，且会统一缩放包括字体在内的所有元素。需要注意的是，scale 仅做视觉缩放，元素占据的布局空间不会改变，因此需配合调整容器尺寸适配视口：

/* 给页面最外层容器（比如自定义的.page-container或body）添加样式 */
.page-container {
  /* 缩放到75% */
  transform: scale(0.75);
  /* 从左上角开始缩放，避免偏移 */
  transform-origin: top left;
  /* 计算缩放后的容器尺寸：原尺寸 / 缩放比例 */
  width: calc(100% / 0.75);
  height: calc(100% / 0.75);
  /* 确保容器占满视口，无滚动 */
  overflow: hidden;
}

若页面直接以:root或body作为根容器，直接应用上述样式即可，能保证Chrome和Safari实现一致的缩放效果。

方案2：针对Safari单独修复字体缩放问题 #

如果想继续使用zoom属性，可通过浏览器特性检测单独调整根元素的font-size，解决Safari字体不缩小的问题：

:root {
  zoom: 0.75;
}

/* 检测Safari浏览器，单独设置字体缩放比例 */
@supports (-webkit-touch-callout: none) {
  :root {
    /* 与zoom比例保持一致 */
    font-size: calc(100% * 0.75);
  }
}

该方案利用Safari独有的-webkit-touch-callout属性做特性检测，让字体和其他元素同步缩小。

方案3：通过viewport元标签动态调整（适配无滚动视口） #

若页面基于视口设计，可通过JavaScript检测设备类型，动态修改viewport的缩放比例：

// 检测平板设备（可根据实际需求调整检测逻辑）
const isTablet = /(iPad|AndroidTablet)/i.test(navigator.userAgent);
if (isTablet) {
  const metaViewport = document.querySelector('meta[name="viewport"]');
  metaViewport.setAttribute('content', 'width=device-width, initial-scale=0.75, maximum-scale=0.75, user-scalable=no');
}

这种方式从视口层面控制缩放，所有浏览器（包括Safari）都会遵循设置，适合无滚动的视口适配页面。

内容的提问来源于stack exchange，提问作者Truite Séchée