Effect:

Reference sample code download:

Download.csdn.net/download/qq…

Directly on the code:

<! DOCTYPEhtml>
<html lang="zh-cn">
    <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"/> 
	<title>APP Download page</title>
	</head>
	<style type="text/css">* {padding: 0;margin: 0; }/* Top title bar */
	.title_box {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #48d484;
		font-size:20px;
		display:flex;
	}

	.back_page..back_home {
		flex:1;	
	}
	.back_page img..back_home img{
		width: 32px;
		height: 32px;
		margin-top:8px;
	}
	.back_page{
		text-align: left;
	}
	.back_home{
		text-align: right;
		margin-right:10px;
	}
	.title_box p {
		flex:3;
		text-align: center;
		color: #ffffff;
	}
	#weixin-tip {
		display: none;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(0.0.0.0.8);
		filter: alpha(opacity=80);
		width: 100%;
		height: 100%;
		z-index: 100;
	}		
	#weixin-tip p {
		text-align: center;
		margin-top: 10%;
		padding: 0 5%;
		position: relative;
	}
	#weixin-tip p img{
		width:100%;
	}
	#weixin-tip .close {
		position: absolute;
		width:50px;
		top: 0;
		left: 5%;
	}
	.app-box{
		width:100%;
		height:100px;
		padding:20px 0;
		text-align:center;
	}
	.app-box .app-left{
		width:48%;
		float:left;
	}
	.app-box .app-right{
		margin-left:2%;
		width:48%;
		float:left;
	}
	.app-box img{width:80%; }.desc{
		padding-top:50px;
		padding-bottom:20px;
		text-align:center;
	}
	.desc h1{
		height:5rem;
		line-height:5rem;
		font-size:2.2 rem;
		color:# 333;
	}
	.desc p{
		height:3rem;
		line-height:3rem;
		font-size:1.5 rem;
		color:#8E8F90;
	}	
	</style>
    <body>
	<! - the title -- -- >
	<div class="title_box">
		<a href="javascript:;" onClick="javascript:history.back(-1);" class="back_page"><img src="images/title-back.png"></a>
		<p>Download the APP</p>
		<a href="/" class="back_home"><img src="images/title-home.png" alt="Back to home page"/></a>
	</div>
	<div class="desc">
	<h1>Download the mobile client now</h1>
	<p>Whenever and wherever you want to play.</p>
	</div>
	<div class="app-box">
		<div class="app-left" id="download_android">
			<img src="images/android-btn.png"/>
		</div>
		<div class="app-right" id="download_ios">
			<img src="images/ios-btn.png"/>
		</div>
	</div>
    <div id="weixin-tip">
		<p><img src="images/live_weixin.png"/>
		<img id="close"  title="Closed" class="close" src="images/close.png"/>
		</p>
	</div>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
        // Check whether it is wechat
	var is_weixin = (function() {
		return navigator.userAgent.toLowerCase().indexOf('micromessenger')! = = -1}) ();var tip = document.getElementById('weixin-tip');
	var close = document.getElementById('close');
	var tip = document.getElementById('weixin-tip');
	var android = document.getElementById('download_android');
	var ios = document.getElementById('download_ios');
	var winHeight = typeof window.innerHeight ! ='undefined' ? window.innerHeight : document.documentElement.clientHeight; // Compatible with IOS, you can remove what is not needed
	window.onload = function() {				
		if(is_weixin) {				
			tip.style.height = winHeight + 'px'; // Compatible with IOS pop-ups
			tip.style.display = 'block';		
		}else{						
			/ / determine the Android
			if (/(Android)/i.test(navigator.userAgent)) {   
				// Download it directly
				var android_url="";// Enter the download address of the Android version here
				window.location.href = android_url;
			}
		}
	}
	close.onclick = function() {
		tip.style.display = 'none';
	}
	$("#download_android").click(function(){
		if(is_weixin) {
			tip.style.height = winHeight + 'px'; // Compatible with IOS pop-ups
			tip.style.display = 'block';
		}else{
			tip.style.display = 'none';
			/ / determine the iPhone | the | | iPod iOS
			if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
				alert("Apple doesn't support Android!");
			} else if (/(Android)/i.test(navigator.userAgent)) { 
			    var android_url="";// Enter the download address of the Android version here
				if(android_url! ="") {window.location.href = android_url;	
				}else{
					alert("An Android version is in development, so stay tuned!"); }}}}); $("#download_ios").click(function(){
		if(is_weixin) {
			tip.style.height = winHeight + 'px'; // Compatible with IOS pop-ups
			tip.style.display = 'block';
		}else{
			tip.style.display = 'none';
			var ios_url="";// Enter the download address of the ios version
			if(ios_url! ="") {window.location.href = ios_url;
			}else{
				alert("An ios version is in development, so stay tuned!"); }}});</script>
    </body>
</html>
Copy the code