前端提升（14）之 IOS和Android常見兼容問題

導航

爲什麼只有一個問題，我也要煞有其事的搞一張圖片呢？我也不知道，可能是因爲傳統吧。哎對，關於我是處子之身的這一點也得到了解釋。

1、IOS下input默認樣式(圓角、陰影)
解決方案

input {
  -webkit-appearance: none;
  border-radius: 0;
  border: 1px #ccc solid;
}

2、在IOS下頁面滑動卡頓，Android沒問題
解決方案

body {-webkit-overflow-scrolling:touch; overflow-scrolling: touch;}

3、input type 改爲button

當input type爲button，disabled爲true，會出現背景色異常(其實就是禁用的樣式)
把input的disabled改爲readonly
opacity：1

4、input type=text切換到英文輸入法IOS下的問題
解決方案

input添加autocapitalize屬性
<input class="SmallFour" type="text" autocapitalize="off" />

5、禁止數字自動識別爲電話號碼

這個比較有用，因爲一串數字在iphone的部分瀏覽器上會顯示成藍色，樣式加成別的顏色也是不生效的。不是我親測，在微信內部瀏覽器沒問題，但是在safari上有問題，IOS系統版本12.1.4

<div style="color: red">1212312312321323</div>

解決方案

<meta name="format-detection" content="telephone=no" />

6、input type=number之後，pc端出現上下箭頭

解決方案

input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

7、是圖片填充到外層的框內，很好用，直接給圖片添加樣式。

object-fit: cover;
width:100%;
height:100%;

8、手機端按住不放 阻止瀏覽器默認響應事件 調試

  //clikMenu 你要點擊的事件節點
    function touchendmovie(clikMenu){
    	var timeOutEvent = 0;
	    $(document).on('touchstart',clikMenu,function(e){
		    timeOutEvent = setTimeout(function(){
		    //這裏編寫你要執行的事件 },300);
		    //這裏設置長按響應時間
		    e.preventDefault();
	    });
	    $(document).on('touchmove',clikMenu,function(e){
		    clearTimeout(timeOutEvent);
		    timeOutEvent = 0;
	    });
	    $(document).on('touchend',clikMenu,function(e){
		    e.stopPropagation();
		    if(timeOutEvent != 0 ){
		    	console.log('這裏是點擊了一下'); 
		    }
		    clearTimeout(timeOutEvent); 
	    });
    }

9、禁止複製、選中文本

.el {
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
   user-select: none;
}

10、input 的placeholder屬性會使文本位置偏上

line-height: （和input框的高度一樣高）---pc端解決方法
line-height：normal ---移動端解決方法