移动端css问题汇总，以及常用css

##css

1. 避免hover闪屏: pointer-events: none;

2. 多行超出隐藏： { display:-webkit-box; word-break:break-all; word-wrap:break-word; white-space:normal; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical }

3. 数字变为蓝色链接：添加标签<meta name="format-detection" content="telephone=no" />

4. 键盘收回遮罩层闪屏无法填满 position用absolute不使用fixed；

5. 解决ios滚动不顺畅、卡顿：-webkit-overflow-scrolling: touch;

6. 移动端 ios fixed失效： 采用absolute

7. ios获取input焦点页面放大：<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>

8. placeholder元素样式的修改：

   input::-webkit-input-placeholder{color:red;}
   input:focus::-webkit-input-placeholder{color:green;}

9. 图片和下一行之间有间距：font-size：0
10. 禁止用户选中文字: -webkit-user-select:none
11. ios iframe设置高度不生效的问题：在引用的html中body、html设置如下css

    html{
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    body{
      position: fixed;
      top:0;
      left:0;
      width:100%;
      height: 100%;
      overflow: scroll;
      -webkit-overflow-scrolling:touch;
    }
    

js解决某些默认行为

var ios = navigator.userAgent.indexOf('iPhone');//判断是否为ios
		if(ios != -1){  
		    //ios下运行
		    var scroll = document.getElementById("scroll")//你需要滑动的dom元素
		    touchScroll(scroll);
		}
		 
	 	var canScroll = true;
		function touchScroll(el) {
			canScroll = false;
		    //el需要滑动的元素
		    el.addEventListener('touchmove',function(e){
		        canScroll = true;
		    })
		    document.body.addEventListener('touchmove',function(e){
		        if(!canScroll){
		            e.preventDefault(); //阻止默认事件(上下滑动)
		        }else{
		            //需要滑动的区域
		            var top = el.scrollTop; //对象最顶端和窗口最顶端之间的距离 
		            var scrollH = el.scrollHeight; //含滚动内容的元素大小
		            var offsetH = el.offsetHeight; //网页可见区域高
		            var cScroll = top + offsetH; //当前滚动的距离
		 
		            //被滑动到最上方和最下方的时候
		            if(top == 0){
		                top = 1; //0～1之间的小数会被当成0
		            }else if(cScroll === scrollH){
		                  el.scrollTop = top - 0.1;
		            }
		        }
		    }, {passive: false}) //passive防止阻止默认事件不生效
		}

2. 解决ios双击页面上移问题：

(function()
{
    var agent = navigator.userAgent.toLowerCase();        //检测是否是ios
    var iLastTouch = null;                                //缓存上一次tap的时间
    if (agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0)
    {
        document.body.addEventListener('touchend', function(event)
        {
            var iNow = new Date()
                .getTime();
            iLastTouch = iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */ ;
            var delta = iNow - iLastTouch;
            if (delta < 500 && delta > 0)
            {
                event.preventDefault();
                return false;
            }
            iLastTouch = iNow;
        }, false);
    }

})();```