1. 程式人生 > >HTML應用推廣-自動識別手機系統(Android/iOS)

HTML應用推廣-自動識別手機系統(Android/iOS)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

		<title>app下載</title>
		<style>
			.Logo {
			    position: absolute;
			    width: 7.5rem;
   				height:7.5rem;
				background: #ffff00;
				text-align: center;
				background: url(app_icon.png) no-repeat center center;
    			background-size: 100% 100%;
    			float:left;
    			top:50%;
    			left:50%;
    			margin-left:-3.75rem; 
				margin-top:-9.75rem;

			}
			.downloadBtn {
				position: absolute;
				background: #eeeeee;
				text-align: center;
				top:50%;
				left:20%;
    			width:60%;
				margin-top:0.5rem;
			}
		</style>
	</head>
	<body>
    	<div class="Logo">
		</div>
        
		<div class="downloadBtn" onclick="download()">
			下載
			<br>
			DOWNLOAD
		</div>
	</body>
	<script type="text/javascript">


		function download() {
			setTimeout(function() {
				if (/android/i.test(navigator.userAgent)) {
					if (/MicroMessenger/i.test(navigator.userAgent)) {
						alert('微信內建瀏覽器不支援開啟本地應用,請點選右上角使用本地瀏覽器開啟');
					} else {
						window.location = "http://xxx";
					}
				}
				if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
					if (/MicroMessenger/i.test(navigator.userAgent)) {
						alert("微信內建瀏覽器不支援開啟本地應用,請點選右上角使用本地瀏覽器開啟");
					} else {
						window.location = "https://xxx";
					}
				}
			}, 1001);
		}
	</script>
</html>