html5手机网站适配

视口设置

HTML5通过<meta>标签定义视口，确保页面在移动设备上正确缩放，关键属性包括：

• width=device-width：设置视口宽度等于设备宽度。
• initial-scale=1：初始缩放比例为1（不缩放）。
• viewport-fit=cover（可选）：适配全面屏或刘海屏设备。

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

响应式布局

采用流式布局和弹性盒子（Flexbox），结合媒体查询实现不同屏幕尺寸的适配：

1. 百分比布局：宽度使用百分比（如width: 100%）而非固定像素。
2. Flexbox/Grid：使用display: flex或display: grid实现自适应排列。
3. 断点设计：通过媒体查询定义不同屏幕宽度的样式。

媒体查询

通过CSS媒体查询针对不同设备调整样式：

/ 示例：针对小屏幕隐藏导航菜单 /
@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  .hamburger-icon {
    display: block;
  }
}

图片与字体适配

1. 图片适配：

   • 使用srcset和sizes属性加载不同分辨率图片：

     <img src="image-small.jpg" 
          srcset="image-small.jpg 400w, image-large.jpg 800w" 
          sizes="(max-width: 600px) 400px, 800px">

   • 使用<picture>元素实现艺术性适配：

     <picture>
       <source media="(min-width: 768px)" srcset="desktop.jpg">
       <img src="mobile.jpg" alt="示例图片">
     </picture>

2. 字体适配：

   • 使用rem单位（基于根字体大小）替代px。
   • 设置body的font-size为16px，并通过用户系统设置动态调整。
   • 优先使用系统字体（如-apple-system, BlinkMacSystemFont）提升性能。

触摸交互优化

1. 按钮与点击区域：
   • 按钮最小高度≥44px，左右padding≥10px。
   • 避免使用纯CSS的:hover效果，改用:active或JavaScript事件。
2. 禁用缩放：

   <meta name="viewport" content="user-scalable=no">

3. 手势支持：
   • 使用touchstart/touchend事件处理滑动、长按等操作。
   • 禁用双击缩放（如UC浏览器）：

     html {
       touch-action: manipulation; / 阻止浏览器默认行为 /
     }

性能优化

1. 代码压缩：启用Gzip/Brotli压缩HTML/CSS/JS。
2. 懒加载：对图片、视频使用loading="lazy"：

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

3. 缓存策略：
   • 设置Cache-Control头信息缓存静态资源。
   • 使用Service Worker缓存关键文件。

问题与解答

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

解答：

1. 使用浏览器开发者工具（如Chrome DevTools）模拟移动设备。
2. 通过BrowserStack或Responsive Design Mode测试真机兼容性。
3. 检查关键指标：首次内容绘制（FCP）≤1.5秒，布局偏移分数（CLS）≤0.1。

问题2：如何处理横竖屏切换时的布局变化？

解答：

1. 监听window.orientation事件：

   window.addEventListener('orientationchange', () => {
     if (window.innerWidth > window.innerHeight) {
       // 横屏逻辑
     } else {
       // 竖屏逻辑
     }
   });

2. 在CSS中定义横竖屏专属样式：

   @media (orientation: landscape) {
     .sidebar {
       display: block;
     }