微信提示“在浏览器打开”效果实现

概述

大体思路是这样的：先建一个蒙版，蒙版放上提示的信息，然后写一个js，在页面打开的时候判断是不是用微信自带的浏览器打开的，如果是就打开蒙版，提示用浏览器打开

基本页面

	
		
		
		
	

	
		

			

				

					

						安卓下载
					
				
				

					

						苹果下载
					
				
			
			
		
	

添加蒙版

//蒙版样式
#Mask {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-image: url(img/tweixinip.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.model-content {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #ffffff;
    border-radius: 6px;
    margin: 100px auto;
    line-height: 30px;
    z-index: 10001;
}

添加js

最终效果

当使用浏览器打开时展示原始页面

当使用微信打开时展示蒙版