H5页面适配问题小记

1.rem布局

• 一般H5页面的最大宽度为750px，即在PC端最大宽度为750px，居中显示，两边留白
• 限定字体大小的范围：(这里选择是12px-22px)
• 换算比例: 1rem = 20px

// rem适配
(function (win, doc) {
  change();
  function change() {
    if (doc.documentElement.clientWidth * 20 / 375 > 22) {
      doc.documentElement.style.fontSize = '22px'
    } else {
      doc.documentElement.style.fontSize = doc.documentElement.clientWidth * 20 / 375 + 'px';
    }
  }

  win.addEventListener('resize', change, false);
  win.addEventListener('orientationchange', change, false);
})(window, document);
var docEl = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
  if (20 * (docEl.clientWidth / 375) > 22) {
    docEl.style.fontSize = '22px';
  } else {
    docEl.style.fontSize = 20 * (docEl.clientWidth / 375) + 'px';
  }
};
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener('DOMContentLoaded', recalc, false);

2.初始化页面加载的时候，为了避免白屏，可以给页面500ms的淡入效果

$(document).ready(function () {
    $("body,html").fadeIn(500);
})

3.点击按钮直接关闭当前打开的页面，可以使用抽离出的closeTab方法

function closeTab() {
  if(typeof(WeixinJSBridge)!="undefined"){
    WeixinJSBridge.call('closeWindow');
  } else {
    if (navigator.userAgent.indexOf("MSIE") > 0) {  
      if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {  
        window.opener = null; window.close();  
      }  
      else {  
        window.open('', '_top'); window.top.close();  
      }  
    }  
    else if (navigator.userAgent.indexOf("Firefox") > 0) {  
      window.location.href = 'about:blank ';  
      //window.history.go(-2);  
    }  
    else {  
      window.opener = null;   
      window.open('', '_self', '');  
      window.close();  
    }
  }
}

4.去掉Iphone的Safari浏览器下input框的圆角

.input{
    -webkit-appearance: none;
    border-radius: 0;
}

5.部分安卓手机使用浏览器自带播放器播放视频暂停后，视频层级最高

解决办法：原来的位置放一张图片，且video：display：none

6.苹果手机input点击自动放大问题：head中添加以下meta标签

<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">