前端提升（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 ---移动端解决方法