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

·  阅读 2558

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

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

基本概念

  • 屏幕尺寸

    电子设备的屏幕尺寸是以屏幕对角线的长度来计算的,单位:英寸(1英寸 = 2.54厘米)

    screen_size.jpg

  • 屏幕分辨率

    横纵方向上的像素点数,单位:像素(1px = 1个像素点)

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

    screen_resolution.jpg

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

  • 屏幕像素密度

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

    ppi.jpg

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

    ppi_num.jpeg

  • 设备像素比

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

    设备像素比 DPR = 物理像素 / 设备独立像素(px是一个相对单位,相对的是设备像素)

    dpr.png

    当比率为 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 获取视觉视口

    viewport.jpg

  • 理想视口

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

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    复制代码
  • 视口单位

    CSS3 中新增了相对于视图窗口的 vwvh 单位

    vw-vh.jpeg

适配方案

  • 预期效果

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

  • 实现思路

    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 背景

关联适配方案

第55期 - 系统推荐缩放比例的适配方案

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改