【杂记】 (判断是否微信浏览器、media 适配写法、 css字体缩放、css3模糊阴影底图滤镜、禁止鼠标右键保存图片、禁止鼠标拖动图片、文字禁止鼠标选中、禁止复制文本)

1. 最后一个子元素 :last-child{}
2. 判断是否微信浏览器

if(isWeiXin()){
	//是微信浏览器走这里
	$(".img").show();
}else{
	var _w = $(document).width();
	if (!navigator.userAgent.match(/(iPhone|iPod|iPad);?/i) &&!navigator.userAgent.match(/android/i)) {//pc
		if (_w>768) {
			location.href = "http://www.wkzj.net/service/product/hwpad";
		}else{
		//是IOS/安卓浏览器时
		$(".img").show();
		}
	}else{
		//是IOS/安卓浏览器时
		download_wkb_App();
	}
}

3. media 适配写法

@media only screen and (max-width:959px){//ipad及以下，所有小于（不等于）960宽度的平板电脑}
@media only screen and (min-width:768px) and (max-width:959px){//仅ipad竖版，所有小于（不等于）960宽度的平板电脑的竖版}
@media only screen and (max-width:767px){//iphone及以下}
@media only screen and (min-width:480px) and (max-width:767px){//仅iphone横版，包括某些平板电脑的竖版}
@media only screen and (max-width:479px){//仅iphone4的竖版}

4. css字体缩放

html{
-webkit-text-size-adjust:100%
}

5. 模糊阴影底图滤镜filter:drop-shadow
   

div {
	width:200px; height:200px;
	position:relative;
	filter:drop-shadow(2px 2px 10px rgba(0,0,0,.9));
	background:#216583;
}
div:after {
	content: '';
	display: block;
	width:30px;height: 30px;
	background:#216583;
	position:absolute;right:-10px;top:20%;
	z-index:-999;transform:rotate(45deg);
}

6. 禁止鼠标右键保存图片
   <img src="logo.png" width="150" height="150" oncontextmenu="return false;">
7. 禁止鼠标拖动图片
   <img src="logo.png" width="150" height="150" ondragstart="return false;">
8. 文字禁止鼠标选中
   <p onselectstart="return false;">文字禁止鼠标选中</p>
<p>普通文字可以选中</p>
9. 禁止复制文本
   <p onselect="document.selection.empty();">禁止复制文本</p>
<p>普通文字可以复制</p>

以上效果用jQuery实现代码：
<script>
  var imgs=$("img");
  imgs.on("contextmenu",function(){return false;});
  imgs.on("dragstart",function(){return false;});
</script>