html5如何自适应手机

使用HTML5的viewport元标签，设置width为设备宽度，initial-scale为1，maximum-scale为1，使页面自适应手机屏幕。

HTML5 自适应手机的方法

html5如何自适应手机

1. 使用响应式布局

响应式布局是一种网页设计方法，可以根据设备的屏幕尺寸和分辨率自动调整页面的布局和元素，在HTML5中，可以使用CSS3的媒体查询（Media Queries）来实现响应式布局。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .box {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
  @media (min-width: 768px) {
    .box {
      width: 50%;
    }
  }
  @media (min-width: 992px) {
    .box {
      width: 33.33%;
    }
  }
</style>
</head>
<body>
  <div class="container">
    <div class="box">内容1</div>
    <div class="box">内容2</div>
    <div class="box">内容3</div>
  </div>
</body>
</html>

2. 使用Bootstrap等前端框架

Bootstrap是一款流行的前端框架，可以帮助开发者快速构建响应式网站，它提供了一套预定义的CSS样式和JavaScript插件，可以方便地实现自适应手机的布局和交互效果。

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4">内容1</div>
      <div class="col-xs-12 col-sm-6 col-md-4">内容2</div>
      <div class="col-xs-12 col-sm-6 col-md-4">内容3</div>
    </div>
  </div>
</body>
</html>