优化实战 第 50 期 - 纯CSS的移动端H5适配方案

响应式页面为了适应不同的终端设备而产生，体验较好，可以自动识别屏幕宽度以改变布局形式。但 不是所有的应用都适合做成响应式

对于一些大型复杂的应用，使用 移动端H5页面 和 PC端应用 协同使用，可以提升用户体验

基本概念

• 屏幕尺寸

  电子设备的屏幕尺寸是以屏幕对角线的长度来计算的，单位：英寸（1英寸 = 2.54厘米）

  

• 屏幕分辨率

  横纵方向上的像素点数，单位：像素（1px = 1个像素点）

  例如：iPhone 6 的屏幕分辨率为 750 * 1336

  

  显示分辨率就是屏幕上显示的像素个数，分辨率越高，显示效果就越精细和细腻

• 屏幕像素密度

  像素密度 PPI 表示每英寸里的像素点的个数

  

  每英寸里的像素点的数量越多，画面自然越细腻

  

• 设备像素比

  用 DPR 表示设备像素比，在 JS 中可以通过 window.devicePixelRatio 获取到

  设备像素比 DPR = 物理像素 / 设备独立像素（px是一个相对单位，相对的是设备像素）

  

  当比率为 1:1 时，使用 1个物理像素 显示 1个CSS像素

  当比率为 2:1 时，使用 4个物理像素 显示 1个CSS像素

  当比率为 3:1 时，使用 9个物理像素 显示 1个CSS像素

  由此衍生出的问题

  当像素比为 1:1 的时候，在页面中显示一个 100px * 100px 的图片，此时图片的实际长宽都是 100 个像素点，占据屏幕上 100 * 100 个物理像素

  这时候，如果在像素比为 2:1 的设备上显示，如果要保持相同的显示效果，那么就需要将图片变成 200px * 200px 大小，此时图片的实际长宽都是 200 * 200 个像素点

视口（viewport）

• 布局视口

  决定网页布局，由于布局宽度大于大部分手机屏幕的宽度，为了页面的显示完整性，浏览器会自动进行缩放

  可通过 document.documentElement.clientWidth 获取布局视口宽度

• 视觉视口

  用户在移动设备上能够看到的网页区域，可通过 window.innerWidth 获取视觉视口

  

• 理想视口

  通过设置，使布局视口和视觉视口一样大

  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  

• 视口单位

  在 CSS3 中新增了相对于视图窗口的 vw 和 vh 单位

  

适配方案

• 预期效果

  在理想视口中，实现随着屏幕宽度大小的改变等比缩放页面内容

• 实现思路

  在 CSS3 中新增加了以根节点 html 的字体大小作为基准值进行长度计算的 rem 单位

  只要我们把根节点的字体大小和屏幕宽度进行关联，就可以解决适配的问题

  100vw = 1屏幕宽度 = 750px (设计图尺寸)

  font-size = 1屏幕宽度（100vw） / 设计图尺寸（750px）* 100

• 字体扩大 100 倍的作用

  既可以便于 rem 单位换算，又可以提升计算精度（设计图的 px 单位缩小 100 倍转换为 rem 单位）

• 方案组成（vw + rem）

  html {
    font-size: 13.33334vw;
  }
  body {
    font-size: .2rem;  /* 设置全局字体大小为 20px */
  }
  

• 强化 PC 端预览效果

  body {
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
  }
  @media screen and (min-width: 560px) {
    html {
      font-size: 54px;
    }
  }
  

常见问题

• 点击元素出现背景色块

  a, button, input, textarea {
    -webkit-tap-highlight-color: rgba(255,0,0,0);
  }
  

• 禁止图片长按

  img {
    pointer-events: none;  /* 阻止元素成为鼠标事件的目标 */
  }
  

• 禁止字体调整

  body {
    text-size-adjust: 100%;
  }
  

  旋转屏幕可能会改变字体大小，让字体大小保持不变

• 清除输入表单的内阴影

  input, textarea {
    -webkit-appearance: none;
  }
  

• 识别文本换行

  body {
    white-space: pre-line;
  }
  

  接口返回数据中包含 \n 或 <br> 时，可交由浏览器做断行处理

• 刘海问题

  <meta name="viewport" content="viewport-fit=cover">
  

  通过设置，使页面占满整个设备屏幕，必要时可以给 body 添加一个 background 背景

关联适配方案