移动端WEB页面适配

移动端WEB页面适配

前言
公司开发一个项目，把安卓和IOS原生开发的同事加了进来，参与h5页面开发。测试时，发现各种适配问题。UI设计的同事问我：你们是不是没有按设计稿来的？检查一看，通篇是px,我做的em适配完全没有用到。因此整理一下移动端WEB页面适配问题记于此。

在这里也要吐槽一下，现在的公司为了省钱，一个人干了几个人的活，有的人还是跨语言开发。难怪很多人吐槽现在的互联网APP没有精品。

实现适配移动端WEB页面的几种方式

• 通过js判断，动态加载css样式
  根据适配的机型不同，动态加载css文件

  (function(win,doc){
     var width = doc.documentElement.clientWidth;
     var link =  doc.createElement('link');
     if(wdth<=320){
       link.href = 'min.css'
     }else if(320<width&&width<375){
       link.href = 'b.css'
     }
     .....
  
  })(window,document)

  该方法可以做到匹配任何尺寸屏幕的手机和PC,但是需要每种尺寸的屏幕写一个css文件，使得开发工作量变大。

• 通过meta标签放大或缩小
  根据meta标签,动态设置user-scalable,maximum-scale,minimum-scale的值

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

  该方法计算复杂，不宜实现

• 通过css3媒体查询，显示不同的样式
  css3支持媒体查询，可以根据 不同尺寸的屏幕显示不同的样式:

  @media screen and (max-width: 300px) {
         body {
             background-color:lightblue;
          }
      }

  该方法不用维护多套css文件，灵活，但是每一个样式类有多个尺寸，不易更改

• 通篇使用em作为单位

  em是相对父节点的css长度单位，例如：如果给一个div设置字体大小fontSize为20px,其子节点设置字体大小fontSize为0.5em,则子节点字体的实际大小为0.5*20px = 10px,即：1em = 20px;
  rem是相对于根元素的css长度单位，例如：设置html的字体大小fontSize为20px,那么1rem = 20px

  使用em实现适配的三种方式：

  第一种：

      //css文件
          html{
             font-size:100%;
          }
          body{
              font-size:1em;
              pading:0;
              margin:0;
          }
  

  优点：纯css实现，简单，同一尺寸的手机显示完全一样；
  缺点：手机尺寸不同，显示的可能不同
  第二种：

  //js文件
  (function(doc, win) {
      doc.addEventListener('DOMContentLoaded', function() {
          var clientWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
          doc.body.style.fontSize = (clientWidth / 375 * 16) + 'px'
      }, false)
  })(document, window)

  优点：任何尺寸的屏幕都可以显示一样的UI效果
  缺点：依赖js,而且要确保手机APP的WebView的宽度与手机屏宽一致

  第三种：

  //css文件
  body{
      font-size: 16px;
      margin: 0;
      padding: 0;
  }
  
  @media screen and (max-width: 320px) {
      body{
          font-size: 13.654px
      }
  }
  @media screen and(min-width: 321px) and (max-width: 375px) {
      body{
          font-size: 16px
      }
  }
  ....

  优点：css加媒体查询实现，可以实现与UI几乎一样的效果
  缺点：必须知道所匹配的手机屏宽

• 使用rem作为单位
  rem实现适配的方式与em的后两种类似，只需将body标签换为html标签

• 使用vm,vh作为单位
  vh:浏览器的可视窗口（Viewport）的高度分为100份，即：100vh;
  vw:浏览器的可视窗口（Viewport）的宽度分为100份，即：100vw;
  使用vh,vw作为单位，也就适配所有机型
  优点：不需要考虑手机屏幕大小问题
  缺点：不同的字体会出现高度不同，兼容性问题