html网页手机大小

视口设置与基础概念

视口（Viewport）是浏览器显示网页的窗口区域，移动端需通过<meta>标签控制布局缩放。
关键代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width：设置视口宽度等于设备宽度。
• initial-scale=1.0：初始缩放比例为1,避免页面被放大或缩小。

响应式布局核心方法

媒体查询（Media Queries）

通过CSS检测屏幕宽度，应用不同样式规则。
语法：

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

常见断点：
| 设备类型 | 屏幕宽度 | 适用场景 |
|————–|——————–|———————————-|
| 大屏手机 | ≥ 768px | 平板、横屏手机 |
| 中小屏手机 | 480px～767px | 竖屏手机 |
| 超小屏幕 | ＜480px | 老旧手机或极小设备 |

图片与字体适配

1. 图片处理：

   • 使用max-width: 100%;防止溢出。
   • 结合<picture>元素实现多分辨率适配：

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

2. 字体优化：

   • 使用rem单位统一缩放。
   • 设置body基准字体：

     body { font-size: 16px; } / 16px = 1rem /
     h1 { font-size: 2rem; }   / 32px /

移动端交互优化

测试与调试工具

1. 浏览器开发者工具：
   • Chrome DevTools的“Toggle device toolbar”（Ctrl+Shift+M）模拟手机。
   • 手动输入屏幕宽度测试断点。
2. 在线服务：
   • BrowserStack（付费）
   • Responsinator（免费）

相关问题与解答

问题1：如何确保网页在折叠屏手机上正常显示？

解答：

• 使用媒体查询监听min-width和max-width，覆盖折叠/展开状态。

• @media (max-width: 600px) { / 折叠状态 /
    .content { flex-direction: column; }
  }
  @media (min-width: 601px) { / 展开状态 /
    .content { flex-direction: row; }
  }

问题2：为什么设置了width: 100%，元素仍超出手机屏幕？

解答：

• 可能原因：
  1. 父元素未设置box-sizing: border-box;，导致内边距（padding）增加宽度。
  2. 存在固定定位（position: fixed;）或外边距（margin）未计算。
• 解决方法：
  • 全局添加 { box-sizing: border-box; }。
  • 检查元素是否被绝对定位或浮动影响