如何设置HTML页面默认缩放为150%及自动调整缩放比例？

一、设置页面默认显示为150%缩放 #

浏览器原生缩放属于用户控制权范畴，无法通过代码强制锁定，但可以用CSS视觉模拟150%缩放效果，同时避免页面滚动异常：

body {
  /* 实现1.5倍视觉缩放 */
  transform: scale(1.5);
  /* 从左上角开始缩放，避免页面偏移 */
  transform-origin: top left;
  /* 抵消缩放导致的横向滚动问题 */
  width: calc(100% / 1.5);
  min-height: calc(100vh / 1.5);
}

注意：这只是视觉层面的缩放，用户仍然可以手动调整浏览器原生缩放比例，部分交互事件（如鼠标坐标）可能需要额外适配。

二、按百分比自动调整缩放 #

可以结合媒体查询或JavaScript，根据场景自动调整缩放比例：

1. CSS媒体查询适配视口尺寸 #

根据不同屏幕宽度自动切换缩放比例：

/* 视口宽度小于1200px时，缩放至120% */
@media (max-width: 1200px) {
  body {
    transform: scale(1.2);
    transform-origin: top left;
    width: calc(100% / 1.2);
    min-height: calc(100vh / 1.2);
  }
}

/* 视口宽度小于800px时，缩放至150% */
@media (max-width: 800px) {
  body {
    transform: scale(1.5);
    transform-origin: top left;
    width: calc(100% / 1.5);
    min-height: calc(100vh / 1.5);
  }
}

2. JavaScript适配浏览器原生缩放 #

通过监听设备像素比变化，自动调整页面缩放以匹配目标比例：

window.addEventListener('resize', adjustScale);

function adjustScale() {
  const targetScale = 1.5;
  const currentRatio = window.devicePixelRatio;
  const scaleValue = targetScale / currentRatio;
  
  document.body.style.transform = `scale(${scaleValue})`;
  document.body.style.width = `calc(100% / ${scaleValue})`;
}

// 页面加载时初始化
adjustScale();

关键提示 #

• 不要试图强制锁定浏览器原生缩放，这违反用户体验原则且技术上无法实现。
• 使用transform: scale()时，可能出现字体模糊、布局偏移问题，需通过transform-origin和尺寸计算优化效果。

内容的提问来源于stack exchange，提问作者Ali Wapiti