-webkit-user-select针对谷歌浏览器是否支持用户选中网页内容

2018-01-19 20:49:51 -webkit-user-select谷歌浏览器下内容选中与禁选,-webkit-user-select针对谷歌浏览器是否支持用户选中网页内容

css样式针对移动端页面布局时,常常会考虑页面内容是否要让用户选中可以复制或禁止选择和禁止复制。css3 user-select属性用来不禁止或禁止用户用鼠标在页面上选中文字、图片等,也就是,让页面内容不可选也不可复制。-webkit-user-select这是针对谷歌浏览器和谷歌移动平台的user-select属性。

user-select值有:
user-select: none;——禁止用户选中
user-select: text;——对用户的选择没有限制
user-select: all;——目标元素将整体被选中,也就是说不能只选中一部分,在你用鼠标选中部分文字时,浏览器会自动选中整个元素里的内容。

常用:
user-select: none;和user-select: text;

-webkit-user-select则是针对谷歌浏览器和谷歌移动平台
-webkit-user-select: none;——谷歌浏览器或谷歌移动平台上访问网页不能复制
-webkit-user-select: text;——谷歌浏览器或谷歌移动平台上访问网页可以选中并可以复制
-webkit-user-select: all;——谷歌浏览器或谷歌移动平台可以选择布局框架(不推荐使用)。

也就是常用到:
-webkit-user-select: none;和-webkit-user-select: text;

考虑全面:
除了普通安卓平台谷歌浏览器,还要考虑苹果,火狐浏览器、IE等所以针对浏览器CSS代码设置如下:

1、所有浏览器特别移动手机平台浏览不能选中内容。

*{-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;user-select: none;}

星号代表所有HTML标签对应CSS初始设置谷歌浏览器、火狐浏览器、IE浏览器及支持user-select的IE浏览器都不允许浏览者不能选中和选中复制内容。

2、所有浏览器特别移动手机平台浏览可以选中内容。

*{-webkit-user-select: text;-ms-user-select: text;-moz-user-select: text;user-select: text;}

这样让几大主流浏览器(谷歌、火狐、IE等)均能选中网页内容。

以上在移动设备(平板、手机)无论安卓、苹果等均支持设置是否允许用户选中对应网页内容。

更新