移动web开发中自己遇到的三个小题及解决方法

Posted 2020-08-04 萧诺

 

大家好！

     这是我第二次写随笔感想，有不足之处希望大家提出，我也算的上一个小白，自己进入前端行业也刚刚半年，在这里半年里我遇到一个技术大牛的好领导，让我在项目中学到很多，想和大家分享一下！ 

一. 移动端禁止选中内容

如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：

.user-select-none {

  -webkit-user-select: none;  /* Chrome all / Safari all */

  -moz-user-select: none;     /* Firefox all （移动端不需要） */

  -ms-user-select: none;      /* IE 10+ */     

}

二. 移动端取消touch高亮效果

在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止：

html {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。

三. 如何禁止保存或拷贝图像（ios）

通常当你在手机或者pad上长按图像 img ，会弹出选项存储图像 或者拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：

img { -webkit-touch-callout: none; }