正則匹配安卓機和ios && 適配

• 正則匹配安卓機

//移動端樣式會出現ios兼容問題,所以接觸到了適配設備問題,具體問題如下:
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if(isiOS){
 //蘋果機執行部分   
}else{
 //安卓機執行部分   
}

• 屏幕適配

//原生匹配
<script>
  var html = document.getElementsByTagName("html")[0];
  var width = window.innerWidth;
  var fontSize = (100 / 750) * width;
  if (fontSize > 100) {
   fontSize = 100;
  }
  html.style.fontSize = fontSize + "px";
  window.onresize = function() {
   var html = document.getElementsByTagName("html")[0];
   var width = window.innerWidth;
   var fontSize = (100 / 750) * width;
   if (fontSize > 100) {
     fontSize = 100;
   }
   html.style.fontSize = fontSize + "px";
  };
</script>

• 1px問題

.border{
	positon:relative
}
.border:after{
   content: " ";
   width: 200%;
   height: 200%;
   position: absolute;
   top: 0;
   left: 0;
   border: 1px solid rgba(0,0,0,.2);
   -webkit-transform: scale(.5);
   transform: scale(.5);
   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   box-sizing: border-box;
   border-radius: 10px;
}

• 輸入數字

<input name="member_phone" type="number" pattern='[0-9]*'>//安卓機使用type=number只能輸入數字,ios需要添加pattern='[0-9]*'
// type="number" 有默認樣式,所以需要使用一下css去除
<style>
    /* 谷歌 */
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
   	-webkit-appearance: none;
   }
   /* 火狐 */
   input[type="number"]{
   	-moz-appearance: textfield;
   }
</style>

• 綁定事件

//使用jQuery獲取元素添加綁定事件,如果是綁定body(document),ios有兼容問題,需要添加穿透樣式
<style>
   body{
		cursor:pointer;
   }
</style>

• ios鍵盤監聽事件

document.body.addEventListener('focusin', () => {  //軟鍵盤彈起事件
  console.log("鍵盤彈起")  
})
document.body.addEventListener('focusout', () => { //軟鍵盤關閉事件
  console.log("鍵盤收起")  
})

• 適配圖片展示
  需求:移動端一般由於屏幕限制,在排版上需要考慮,圖片太大但是容器太小的情況,這裏一般有兩種處理方式,第一種比較簡單,把需要呈現的圖片當成背景圖片,使用背景圖片的 background-size: cover; 屬性,讓圖片自動適應,鋪滿全部盒子;另一種就是使容器超出隱藏,每部圖片等比縮放,垂直居中與容器中央.對比上面兩種方法,很顯然第一種比較方便且便捷,效果也會比第二種好,但是由於是背景圖片,沒有辦法點擊小圖查看大圖了.第二種方式可以解決這個問題,唯一難以確定的是這個縮放比,所以效果沒有第一種好,但是兩種均能解決這問題
  

• 小程序內嵌H5頁面刷新問題
  蘋果機執行window.location.reload()，安卓機不執行，如果需要刷新H5頁面，需要在原有地址上添加參數，不同地址請求才會刷新
  注:微信一波小程序緩存的清除方式，退出(切換)賬號，重新登錄即可，一定要是完全退出後才行

• 部分蘋果機點擊事件失效
  蘋果機在微信瀏覽器中打開時，部分機型沒有document，點擊事件可能失效，最好採用類名或者id名