首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

使用手机浏览页面的时候,有些浏览器内核的原因,点击 img 标签图片会自动放大,长按会弹出下载或者保存选项。 在写页面时如何避免此类情况的发生呢?我们可以使用 CSS 来屏蔽图片的选中。 ?...我整理了两个方案: 1、首先想到的是通过 JS 实现,对 touch 事件做处理。...img { pointer-events: none; } 如果只是禁止图片选中,长按图片不会有问题,但是如果是先选择旁边的文字,同时选中了图片,那图片照样会被复制出来。...再给元素的 CSS 中添加如下两行代码: -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */ -moz-user-select: none; 这时候禁止选中文字就没有问题了...声明:本文由w3h5原创,转载请注明出处:《CSS屏蔽手机长按选中 防止图片自动放大 禁止复制》 https://www.w3h5.com/post/98.html

6.9K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用localResizeIMG3+WebAPI实现手机图片上传

    写过上传图片的都知道,在HTML5没出来以前,我们做上传图片预览,必须要先上传到服务器,然后在由服务器来反馈给客户预览,这样..既不科学也会占用大量的服务器资源....,呃,是通过JS图片压缩(可设置压缩率)成base64字符串 使其可以通过AJAX参数的形式直接上传. localResizeIMG3 的开源地址:https://github.com/think2011...(好吧,不懂的话..其实就是我也说了手机嘛,节省流量,~图片质量还行吧..) 正文开始 首先我们来看看WebAPI的实现代码~我的风格..你们懂的..不解释太多,都在注释里了.....的代码~(重点~) 首先我们来看看HTML5直接客户预览图片的代码: // 选择图片,读取地址预览的辅助函数 //采用HTML5 FileReader接口 兼容IE9以上.....} } }); } 这样,我们就完成使用localResizeIMG3+WebAPI实现手机图片上传的全部功能

    1.3K80

    手机有没有好用的图片识别文字工具值得推荐?

    1、微信提取文字 微信基本上是现在手机中必装软件,很多人仅用微信用来日常聊天,实际上很多小功能也是非常好用。今天给大家介绍微信提取文字的方法。 第一步:打开好友对话框,找到需要识别的图片。...第二步:点击右下角【…】,这里能看到对图片发送给朋友、收藏、保存、编辑、定位、翻译以及提取文字等多个功能。 第三步:点击【提取文字】,自动将图片转文字为文本。...2、知意字稿 知意字稿是知意软件推出的一款转文本工具,上传图片——提交文件自动转写——生成的文本保存本地,仅需三步就能完成将图片转化为文本。...另外软件毫秒级相应上传的文件,快速将图片转转化为文本,在图片文字清晰的情况下,生成文本的准确率超过95%。...知意字稿针对转写端口做了详细优化,导出的文件可以选择txt、word、xls格式,适用于数字、手写、表格、电子文档等各种图片类型,满足用户不同图片的转写需求。

    3.7K10

    移动页面按手机屏幕分辨率自动缩放的js

    ,在手机的样式也会因此大乱,在页面头部加入以上一段js之后,在手机就可以正常显示了, var phoneScale = phoneWidth/750; 除以的为设计图设计的页面宽度,750是按iphone6...来设计(根据自己使用需求来修改),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。...试想,浏览器如果把电脑的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下,手机横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如...; opera:850px; Andriod webkit:800px; IE:974px; 然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑页面没有出现横向滚动条...排版结束后在放大到1080宽。 所以当取window.innerwidth之类的值的时候,取的是WebKit实际排版宽度360,而不是1080.

    5.4K80

    Node.js + Vue.js 全栈开发王者荣耀手机官网和管理后台

    Element-UI,网站快速成型工具,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面组件库 Element-UI中文官网地址 Express是基于 Node.js 平台,快速、开放...其中文官网地址是:http://www.expressjs.com.cn Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机官网和管理后台,目前的...【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机官网和管理后台 本项目是 Bilibili 全栈之巅 视频教程相关源码 https://github.com/wxs77577/node-vue-moba...、NodeJs+VueJs全栈开发王者荣耀官网(Express+ElementUI) [第一章 + 第二章] NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机官网和管理后台...[第三章]NodeJs + VueJs (Express + ElementUI) 全栈开发王者荣耀手机官网和管理后台 - 第三章 [第四章]NodeJs+VueJs全栈开发王者荣耀官网(Express

    12K20

    Node.js 服务图片处理利器——sharp 进阶操作指南

    sharp 是 Node.js 平台上相当热门的一个图像处理库,其实际上是基于 C 语言编写 的 libvips 库封装而来,因此高性能也成了 sharp 的一大卖点。...当然,如果服务是按照固定规则给图片添加水印(比如新浪微博里图片水印放置在固定的位置),前端就不必做什么了。...这个时候如果用户添加完水印并且选好位置后,必须将数据发送至服务处理再得到处理结果,势必会影响整个服务的流畅性。...当然,为了追求服务功能的完整性,还是建议使用前端展示+后端处理的模式。 粘贴文字 粘贴文字的需求实际上与添加水印比较类似。...拼接模式比较好理解,无非是水平或是垂直排列图片。背景颜色则用于填充留白处。拼接图片时,图片以根据轴线居中排列。以水平排列图片为例,示意图如下: ?

    7.1K20

    android webview加载html图片自适应手机屏幕大小&点击查看大图

    我们在开发中,显示信息详情时,一般后台会给出html文本,在android一般采用webview控件来展示,但是后台给出的html文本一般是给电脑用的,没有自适配手机,导致手机图片显示过大,需要左右移动来查看全图...下面给出几种实用方法,达到在手机用webview展示html中的图片,能自适应手机屏幕展示。...方法三:使用js脚本,重置img标签中图片的宽度和高度 此方法需要使用js,固webview设置属性中一定要添加下面这句 webSettings.setJavaScriptEnabled(true);/...点击详情图片查看大图 (1)注入js脚本,设置图片点击函数openImage private void addImageClickListner() { // 这段js函数的功能就是,遍历所有的...总结 上面三种方法,都能达到webview中图片自适应用手机屏幕大小,但三种方法,笔者更多的是采用第三种方法来实现。使用虽然复杂一些,但是不用引入第三方库,方便控制。

    6.3K10
    领券