H5 移动端开发注意事项

一、meta标签的设置

   viewport视口属性设置

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

• width：视口的宽度，width=device-width：宽度是设备的宽度
• initial-scale：初始化缩放，- initial-scale=1.0：不缩放
• user-scalable：是否允许用户自行缩放，取值0或1，yes或no
• minimum-scale：最小缩放
• maximum-scale：最大缩放
• 一般设置了不允许缩放，就没必要设置最大最小缩放了。
• viewport-fit=cover 解决iphoneX、11、12等刘海儿屏和底部有安全区域都不能全凭问题，也需要配合页面高度设置为100vh，有时候100%不生效。
  
  

二、单位的使用

　　需使用百分比%、vw/vh、rem单位，如使用uni-app开发使用rpx（该框架已经做了单位转换）

　　建议使用rem，转换rem单位的两种方式

　　1、js计算设置根元素的fontSize，一般以750设计搞计算。需要放在页面头部header标签里边。

<script>
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          if (clientWidth >= 750) {
            docEl.style.fontSize = '100px';
          } else {
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          }
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

　　2、利用媒体查询设置元素的fontSize，可兼容大小屏幕，如不做ipad兼容，建议使用第一种。

@media screen and (min-width: 320px) {
  html {
    font-size: 42.6667px;
  }
}

@media screen and (min-width: 360px) {
  html {
    font-size: 48px;
  }
}

@media screen and (min-width: 375px) {
  html {
    font-size: 50px;
  }
}

@media screen and (min-width: 400px) {
  html {
    font-size: 53.3333px;
  }
}

@media screen and (min-width: 414px) {
  html {
    font-size: 55.2px;
  }
}

@media screen and (min-width: 440px) {
  html {
    font-size: 58.6667px;
  }
}

@media screen and (min-width: 480px) {
  html {
    font-size: 64px;
  }
}

@media screen and (min-width: 520px) {
  html {
    font-size: 69.3333px;
  }
}

@media screen and (min-width: 560px) {
  html {
    font-size: 74.6667px;
  }
}

@media screen and (min-width: 600px) {
  html {
    font-size: 80px;
  }
}

@media screen and (min-width: 640px) {
  html {
    font-size: 85.3333px;
  }
}

@media screen and (min-width: 680px) {
  html {
    font-size: 90.6666px;
  }
}

@media screen and (min-width: 720px) {
  html {
    font-size: 96px;
  }
}

@media screen and (min-width: 760px) {
  html {
    font-size: 101.3333px;
  }
}

@media screen and (min-width: 800px) {
  html {
    font-size: 106.6666px;
  }
}

@media screen and (min-width: 960px) {
  html {
    font-size: 128px;
  }
}

三、移动端如使用有软键盘弹出的页面，尽量不使用fixed定位，输入框input获取焦点得时，虚拟键盘会把fixed元素顶上去，ios中有时候fixed定位会失效，一般使用绝对定位。

四、ios页面滑动不流畅问题（如引用滑动插件可不做处理）

.scroll-y{
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}

五、new Date()日期格式注意

　　ios不支持new Date('2020-11-20 20:20')这种格式，会报NAN，安卓支持，ios支持的格式为new Date('2020/11/20 20:20')

let date = '2020-11-20 20:20' 
date.replace(/\-/g, '/')    

六、移动端尽量使用flex布局，不使用float浮动。

七、移动端加载图片尽量使用2倍图，安卓浏览器加载图片，有些设备会模糊。