移动端 H5

唤起 App

setInterval 在 iOS 中不会停止运行，在 android 中停止运行。iOS 通过 document.hidden 和 document.webkitHidden 属性来判断App是否被正常唤起。

• H5唤起App

禁用 iOS 橡皮筋回弹效果

• ios中禁止回弹效果

禁止长按选择文字 CSS

-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;

禁用长按弹出菜单

node.addEventListener('contextmenu', function(e){
    e.preventDefault();
});

安全区域 safearea

示例：

@supports (bottom: constant(safe-area-inset-bottom)) or
  (bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-tool {
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
  }
}

rem 布局

function adapt(designWidth, rem2px){
  var d = window.document.createElement('div');
  d.style.width = '1rem';
  d.style.display = "none";
  var head = window.document.getElementsByTagName('head')[0];
  head.appendChild(d);
  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
  d.remove();
  document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
  var st = document.createElement('style');
  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
  st.innerHTML = portrait + landscape;
  head.appendChild(st);
  return defaultFontSize
};
var defaultFontSize = adapt(640, 100);

分辨率

• px：pixel，像素，电子屏幕上组成一幅图画或照片的最基本单元
• pt: point，点，==印刷行业常用单位，等于1/72英寸==
• ppi: pixel per inch，每英寸像素数，该值越高，则屏幕越细腻，大于326ppi为视网膜屏幕
• dpi: dot per inch，每英寸多少点，该值越高，则图片越细腻
• dp: dip，Density-independent pixel, 是安卓开发用的长度单位，1dp表示在屏幕像素点密度为160ppi时1px长度
• sp: scale-independent pixel，安卓开发用的字体大小单位。

其它

移动端按钮的:active伪类是无效的，必须加上 document.body.addEventListener('touchstart', function () { }); 来激活按钮的:active。