如何为<320px超小视口适配网站 复刻Apple官网缩放保原布局效果

核心逻辑是将320px设为页面最小布局宽度，当视口宽度小于该值时，不再调整响应式布局，直接将320px宽度的完整页面按比例缩小适配当前视口。以下是两种可行实现方式：

方案1：JS动态调整viewport（兼容性最优，与Apple官网实现逻辑一致） #

这个方案不会影响原有响应式布局逻辑，仅在超小屏场景下触发缩放，适配所有宽度的超小屏设备。

实现步骤 #

1. 先给页面根节点设置最小宽度，保证页面布局最小按320px渲染，不会被挤压变形：

html {
  min-width: 320px;
}

2. 添加JS逻辑，动态计算缩放比例并修改viewport配置：

const MIN_LAYOUT_WIDTH = 320
const viewportMeta = document.querySelector('meta[name="viewport"]') || document.createElement('meta')

if (!viewportMeta.parentNode) {
  viewportMeta.name = 'viewport'
  document.head.appendChild(viewportMeta)
}

function adjustScaleForSmallScreen() {
  const currentScreenWidth = window.innerWidth
  if (currentScreenWidth < MIN_LAYOUT_WIDTH) {
    const scale = currentScreenWidth / MIN_LAYOUT_WIDTH
    viewportMeta.setAttribute('content', `width=${MIN_LAYOUT_WIDTH}, initial-scale=${scale}, minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no`)
  } else {
    // 视口宽度≥320px时恢复常规自适应视口配置
    viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=yes')
  }
}

// 页面初始化时执行
adjustScaleForSmallScreen()
// 监听窗口尺寸变化、横竖屏切换时重新计算
window.addEventListener('resize', adjustScaleForSmallScreen)
window.addEventListener('orientationchange', adjustScaleForSmallScreen)

方案2：纯CSS实现（适合固定超小屏尺寸适配场景） #

如果仅需要适配某一固定宽度的超小屏，不需要动态适配不同宽度，可以用transform缩放实现，缺点是缩放后页面流高度不变，会出现底部空白，需要额外修正高度：

html {
  min-width: 320px;
  transform-origin: left top;
}
/* 以适配280px宽度为例 */
@media screen and (max-width: 319px) {
  html {
    transform: scale(calc(100vw / 320));
    /* 修正缩放后高度溢出/空白问题 */
    height: calc(100vh / (100vw / 320));
    overflow: hidden;
  }
}

注意事项 #

• 原有页面的响应式断点不需要调整，只要保证所有断点的触发宽度都≥320px即可，小于320px时会直接复用320px宽度下的布局
• fixed定位元素不需要额外适配，viewport缩放不会导致定位偏移

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