html手机网站适配屏幕

视口（Viewport）设置

作用：控制网页在移动设备上的初始缩放比例及尺寸
必须添加的Meta标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

参数说明：
| 参数 | 作用 |
|———————|——————————|
| width=device-width | 宽度等于设备屏幕宽度 |
| initial-scale=1.0 | 初始缩放比例为1（不缩放） |
| maximum-scale=1.0 | 最大缩放比例限制为1 |
| user-scalable=no | 禁止用户手动缩放 |

响应式布局（Responsive Layout）

核心原则：通过CSS媒体查询动态调整样式
关键步骤：

1. 流体布局：使用百分比宽度替代固定像素

   .container { width: 100%; }

2. 媒体查询：根据屏幕宽度定义断点

   @media (max-width: 768px) {
       .sidebar { display: none; }
   }

3. 弹性盒子（Flexbox）：自动分配空间

   .flex-container { display: flex; flex-wrap: wrap; }
   .item { flex: 1 0 200px; }

字体与单位适配

图片与媒体适配

方案对比：
| 方案 | 优点 | 缺点 |
|———————|——————————|——————————|
| srcset属性 | 按需加载不同分辨率图片 | 需手动定义多套资源 |
| background-size | 背景图自适应拉伸 | 可能模糊 |
| picture元素 | 结合source实现复杂逻辑 | 代码量稍多 |

示例：

<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  <source srcset="image-large.jpg" media="(min-width: 601px)">
  <img src="image-default.jpg" alt="示例图片">
</picture>

性能优化

1. 懒加载：延迟加载非首屏资源

   <img loading="lazy" src="image.jpg" alt="懒加载图片">

2. 压缩代码：使用工具压缩HTML/CSS/JS
3. 缓存策略：设置Cache-Control缓存静态资源

常见问题与解答

问题1：如何适配不同设备的像素密度（如Retina屏）？
解答：

• 使用<picture>或srcset提供高分辨率图片
• <img src="image@1x.jpg" srcset="image@2x.jpg 2x">
• CSS中设置-webkit-font-smoothing: antialiased;优化文字显示

问题2：如何测试手机网站适配效果？
解答：

1. 浏览器开发者工具：Chrome的“Toggle device toolbar”模拟不同设备
2. 在线工具：Google Mobile-Friendly Test（已停用，可用Lighthouse替代）
3. 真机测试：通过USB连接手机调试，或使用BrowserStack等平台