iOS Safari中使用transform: scale缩放body时如何铺满屏幕而非留白居中？

问题原因 #

使用transform: scale(0.65)时，默认以元素中心为原点进行缩放，缩放后元素的布局占位仍保持原始尺寸，因此会出现页面缩在屏幕中央、四周留空白的情况。

解决方案 #

1. 先重置HTML和body的默认样式，消除额外间距：

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

2. 修改body的缩放样式，设置缩放原点为左上角，并调整宽高抵消缩放后的占位：

body {
  /* 设定缩放原点为左上角 */
  -webkit-transform-origin: top left;
  transform-origin: top left;
  /* 执行缩放 */
  -webkit-transform: scale(0.65);
  transform: scale(0.65);
  /* 计算缩放后的宽高，确保缩放后刚好铺满屏幕 */
  width: calc(100% / 0.65);
  height: calc(100% / 0.65);
}

补充说明 #

• 使用calc(100% / 0.65)可以精准计算出需要的宽高，避免硬编码数值带来的误差；
• 添加overflow: hidden可以防止页面出现滚动条，确保完全铺满屏幕。

内容的提问来源于stack exchange，提问作者Danny Beckett