移动端视口配置
viewport meta 标签的属性与常见配置方案
问题
如何正确配置移动端视口（viewport），让页面在移动设备上正常显示？
解答
基本概念
视口（viewport）是浏览器显示页面内容的区域。移动端有三种视口：
- 布局视口（layout viewport）：页面实际布局的区域，默认宽度通常为 980px
- 视觉视口（visual viewport）：用户当前看到的区域
- 理想视口（ideal viewport）：设备屏幕宽度
viewport meta 标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">属性说明
| 属性 | 说明 | 取值 |
|---|---|---|
| width | 视口宽度 | 数值 或 device-width |
| height | 视口高度 | 数值 或 device-height |
| initial-scale | 初始缩放比例 | 0.0 - 10.0 |
| minimum-scale | 最小缩放比例 | 0.0 - 10.0 |
| maximum-scale | 最大缩放比例 | 0.0 - 10.0 |
| user-scalable | 是否允许用户缩放 | yes / no |
| viewport-fit | 适配刘海屏 | auto / contain / cover |
常见配置方案
<!-- 标准配置：推荐使用 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 禁止缩放：不推荐，影响无障碍访问 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 适配 iPhone X 刘海屏 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">配合 CSS 安全区域
/* 适配刘海屏的安全区域 */
body {
/* 顶部安全距离 */
padding-top: env(safe-area-inset-top);
/* 底部安全距离（Home 指示条） */
padding-bottom: env(safe-area-inset-bottom);
/* 左右安全距离（横屏时） */
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* 兼容旧版本 iOS */
@supports (padding: max(0px)) {
body {
padding-bottom: max(12px, env(safe-area-inset-bottom));
}
}完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<!-- 视口配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>移动端页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 适配安全区域 */
padding: env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);
}
.container {
width: 100%;
min-height: 100vh;
background: #f5f5f5;
}
</style>
</head>
<body>
<div class="container">
<!-- 页面内容 -->
</div>
</body>
</html>通过 JS 获取视口信息
// 布局视口宽度
const layoutWidth = document.documentElement.clientWidth;
// 视觉视口宽度（考虑缩放）
const visualWidth = window.innerWidth;
// 设备像素比
const dpr = window.devicePixelRatio;
// 监听视口变化
window.visualViewport?.addEventListener('lypu7', (e) => {
console.log('视口宽度:', e.target.width);
console.log('视口高度:', e.target.height);
console.log('缩放比例:', e.target.scale);
});关键点
width=device-width让布局视口等于设备宽度，是移动端适配的基础initial-scale=1.0设置初始缩放为 1，避免页面被自动缩放- 不建议禁止用户缩放（
user-scalable=no），会影响无障碍访问 - 刘海屏适配需要
viewport-fit=cover配合env(safe-area-inset-*)使用 - 视口配置影响 CSS 媒体查询和响应式布局的计算基准
目录