移动端的小问题整理

1.问题：在iPhone设备上点击时会出现一个半透明的灰色背景。

解决办法：

html,body{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

　　

-webkit-tap-highlight-color 是 css3 的新属性，这个属性只用于 IOS(iPhone和iPad)。当你点击一个链接或通过 Javascript 定义的可点击元素的时候，它就会出现一个半透明的灰色背景。你可以设置 -webkit-tap-highlight-color 为任何颜色，想要禁用这个背景，设置颜色的透明度设置为0。

  2.禁止ios长按复制粘贴功能

/*设置IOS页面长按不可复制粘贴，但是IOS上出现input、textarea不能输入，因此将使用-webkit-user-select:auto;*/


*{
  -webkit-touch-callout:none; /*系统默认菜单被禁用*/
  -webkit-user-select:none; /*webkit浏览器*/
  -khtml-user-select:none; /*早期浏览器*/
  -moz-user-select:none;/*火狐*/
  -ms-user-select:none; /*IE10*/
  user-select:none;
}
input,textarea {
  -webkit-user-select:auto; /*webkit浏览器*/
  margin: 0px;
  padding: 0px;
  outline: none;
}

3.如果再touchstart事件中加入了alert（）事件则会阻止touchmove和touchend事件。

 4.取消手机端页面长按图片出现保存或者图片被打开的方法

在移动端，长按移动端页面图片会出现收藏或保存图片提醒，还有微信手机端页面会

出现打开图片的情况，下面说一下如何取消这种情况。

可以使用background-image代替img标签，但是这样适应性不好。还可以给img标签添加pointer-events:none属性来阻止这种弹出框。

1.使用 pointer-events:none

给  img 标签加样式：img{pointer-events:none}

亲测有效，适用于微信客户端的手机页面，图片被打开的情况
 

2.加全局样式

         *{

 

            -webkit-touch-callout: none;

            -webkit-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;

          }