在前端移动端开发中，如果你想将 viewport 的宽度“写死”（固定为某个值），然后让页面内容根据这个固定宽度自动按比例缩放以适应不同屏幕，同时保持正确的比例，可以通过设置 viewport meta 标签并结合 CSS 来实现。以下是具体的正确用法和解释：
1. HTML 中的 viewport 设置
在 <head> 标签中添加以下 meta 标签，将 viewport 的宽度固定为某个具体值（例如 375px，常见于移动端设计稿宽度）：
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width=375: 将 viewport 的宽度固定为 375px。initial-scale=1.0: 初始化缩放比例为 1（即不缩放）。maximum-scale=1.0: 最大缩放比例为 1，防止用户放大。user-scalable=no: 禁止用户手动缩放。
通过这种方式，浏览器会将 viewport 锁定为 375px 的宽度，而实际设备宽度如果不同，会按照比例自动缩放内容。
2. CSS 配合适配
固定 viewport 宽度后，通常需要配合 CSS 来确保页面内容按比例适配。以下是两种常见的实现方式：
使用 rem 或 vw 单位
以设计稿宽度（如 375px）为基础，使用 rem 或 vw 单位动态计算尺寸：
- 设置根字体大小（
html标签的font-size）为设计稿宽度的基准值。 - 然后在 CSS 中使用 rem 单位编写样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
html {
font-size: 100px; /* 基准值，可以根据设计稿调整 */
}
body {
margin: 0;
width: 3.75rem; /* 375px / 100 = 3.75rem */
height: 6rem; /* 示例高度 */
background-color: lightblue;
}
.box {
width: 1.5rem; /* 150px / 100 = 1.5rem */
height: 1rem;
background-color: coral;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
原理：
font-size: 100px表示 1rem = 100px。- 设计稿中的 375px 宽度转为 3.75rem，150px 转为 1.5rem。
- 实际渲染时，浏览器会根据 viewport 的 375px 宽度按比例缩放这些 rem 值。
3. 注意事项
- 性能：使用 rem 方案更轻量，transform 方案可能在复杂页面中影响性能。
- 设计稿一致性：确保设计稿的宽度与 viewport 的
width值一致。 - 高度处理：如果需要高度也按比例适配，可以通过 rem 或计算比例来实现。
- 浏览器兼容性：现代浏览器都支持上述方法，但极端情况下（如老旧设备），可能需要额外的兼容处理。
如果是移动端开发，推荐使用 rem + 固定 viewport 宽度，因为它简单、灵活，且无需额外 JavaScript。
