HTML WAP 页面自适应代码详解 - 轻松适配移动设备 - 常规

以下是一个简单的 HTML WAP 页面自适应代码：

<!DOCTYPE html>
<html>
<head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>WAP页面自适应</title>
  <style>
    /* 指定页面宽度为100% */
    html, body {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    /* 指定图片宽度为100% */
    img {
      max-width: 100%;
      height: auto;
    }
    
    /* 指定导航链接宽度为100% */
    .nav-link {
      display: block;
      width: 100%;
      text-align: center;
      background-color: #ccc;
      padding: 10px;
      color: #fff;
      text-decoration: none;
    }
    
    /* 指定页面内容区域宽度为90% */
    .content {
      width: 90%;
      margin: 0 auto;
      padding: 10px;
    }
    
    /* 指定页面底部宽度为100% */
    .footer {
      width: 100%;
      text-align: center;
      background-color: #ccc;
      padding: 10px;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class='header'>
    <img src='logo.png' alt='Logo'>
    <a href='#' class='nav-link'>Link 1</a>
    <a href='#' class='nav-link'>Link 2</a>
    <a href='#' class='nav-link'>Link 3</a>
  </div>
  
  <div class='content'>
    <h1>WAP页面自适应</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac tellus neque. Proin fringilla diam eget mattis rutrum. Sed vel tristique justo. Nulla et quam at turpis fermentum egestas vestibulum et arcu. Sed ac magna auctor, eleifend turpis a, posuere odio. Quisque consectetur sapien in elit malesuada, ac imperdiet justo euismod. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed congue odio non enim ultrices, vel tincidunt felis pharetra. Cras laoreet, velit sit amet bibendum ultrices, quam purus volutpat elit, sit amet feugiat nunc elit a sapien. Fusce quis quam vitae libero feugiat sagittis. Aenean quis rutrum felis. Sed id lectus vitae mauris congue malesuada.</p>
  </div>
  
  <div class='footer'>
    &copy; 2021 WAP页面自适应
  </div>
</body>
</html>

这段代码使用了 CSS 来设置页面元素的宽度和高度，以及图片的最大宽度和高度自适应。在 <meta> 标签中，我们使用了 viewport 属性来指定视口宽度为设备宽度并设置初始缩放比例为 1。这使得页面可以根据设备的宽度自适应，从而适应各种不同的移动设备。