CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制

使用手机浏览页面的时候,有些浏览器内核的原因,点击 img 标签图片会自动放大,长按会弹出下载或者保存选项。

在写页面时如何避免此类情况的发生呢?我们可以使用 CSS 来屏蔽图片的选中。

11.png CSS屏蔽手机端长按选中 防止图片自动放大 禁止复制 经验总结

我整理了两个方案:

1、首先想到的是通过 JS 实现,对 touch 事件做处理。

window.ontouchstart = function(e) { e.preventDefault(); };

但是如果页面较长,滚动事件就失效。所以此方案无效,如果只是某个 div 有需求,可以这样处理。

2、通过 CSS3 属性实现。

img {
	pointer-events: none;
}

如果只是禁止图片选中,长按图片不会有问题,但是如果是先选择旁边的文字,同时选中了图片,那图片照样会被复制出来。

再给元素的 CSS 中添加如下两行代码:

-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none;

这时候禁止选中文字就没有问题了,可以实现整篇文章不可复制或保存。

推荐阅读:

WebStorm 设置Sublime默认字体Consolas

阿里巴巴矢量图标库 iconfont 的使用方法

写一写今天用阿里云安装wdCP搭建网站踩的坑

新网站如何做好SEO优化 尽快被收录

js获取input上传文件的文件名和扩展名的方法

赞 (2)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)