html pc、手机、微信端自适应，app推广下载页面

time: 2016-04-06
客户需求一个三端适配的app推广页面，所以百度了一下，写了一个，
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>
	手机客户端下载
</title>
    <script src="resources/jquery-1.7.2.min.js"></script>
    <style>
        body {
            width: 100%;
            margin: 0 auto;
			background-color: #004285;
        }
		html, body, div, h1, h2, h3, h4, h5, h6,ul,li,  ol, dl, dt, dd, blockquote, pre, form, fieldset, table, th, td, span,input{padding:0;margin:0px auto;font-family: Adobe Heiti Std,微软雅黑,sans-serif;}
		li{ text-decoration:none; list-style-type:none;}
		ul{ list-style-type:disc;}
		.clearfix:after{clear:both;display: block;content: "...";visibility: hidden;height: 0;font-size: 0;}
		.clearfix{*zoom:1;}
		a{ color: #000;text-decoration: none;font-family: Adobe Heiti Std,微软雅黑,sans-serif;font-size: 14px;}
		.red{ color: #cc0000;}
        .Client_download
        {
			margin: 0 auto;
			max-width: 640px;
			width: 100%;
			height: 100%;
			/*width:100%; 
			height:auto;
			min-height:480px;
			background:url('resources/Client_download_BG.png');
			background-position: 100%,100%;
			filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";  -moz-background-size:100% 100%;  background-size:cover;*/
			background: url("resources/Client_download_BG.jpg") no-repeat;
			/*filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";*/
			-moz-background-size: 100% 100%;
			background-size: 100% 100%;
        }
		.line {
			background: url("resources/client_browser_line.png") no-repeat right top;
			position: absolute;
			top: 0;
			right: 20px;
			width: 25px;
			height: 57px;
			background-size: 100%;
		}
		.Client_tip_1 {
			border-radius: 2%;
			background-color: #fff;
			width: 96%;
			height: 60px;
			line-height: 60px;
			margin-left: auto;
			margin-right: auto;
			font-weight: bold;
			padding-left: 2%;
		}
		.Client_download_tel {
			width: 100%;
			height: auto;
			float: left;
			margin-top: 20px;
			margin-bottom: 40px;
		}
        .show_img
        {
            width: 100%;
            height: auto;
            border: 0px;
           
        }

        .Client_download_dow
        {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
            padding-top: 72%
        }

        .Client_download_title
        {
            display: none;
            width: 100%;
            height: auto;
            float: left;
            margin-top: 20%;
            line-height: 80px;
        }

        .Client_download_Edition
        {
            border-radius: 10px;
            background-color: #fff;
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
            font-weight: bold;
        }

        .Client_download_iPhone
        {
            width: 40%;
            height: 40px;
            /* float: left;*/
            margin-top: 10px;
          
        }

        .Client_download_Android
        {
            width: 40%;
            height: 40px;
            /*float: right;*/
            margin-top: 10px;
        }
		.Client_tip_1 span {
			display: table-cell;
			vertical-align: middle;
			padding: 0 2px;
		}
		.Client_tip_span {
			color: blue;
		}
    </style>
</head>
<body>
<div class="container" id="view_1" style="display:none;">
	<div class="line"></div>
	<div class="Client_tip_1 padding" style="padding-top: 36px;">
		<span id="step1" class="Client_tip_span">第一步 </span>
		<span>点击页面右上角图标</span>
		<span><img src="resources/Client_download_right.png" style="width:30px; height:34px; margin-top:13px; "></span>
	</div>
	<div class="Client_tip_1">
		<span id="step2" class="Client_tip_span">第二步 </span>
		<span>点击“在浏览器中打开”</span>
		<span><img src="resources/client_browser_android.png" style="width:40px; height:auto;margin-top:15px; display:inline-block; "></span>
	</div>
	<div class="Client_download_tel">
		<img class="Client_download_tel" src="resources/Client_download_tel.png" />
	</div>
</div>
<div class="Client_download" id="view_2" style="height: 1006px;display:block;">
	<div class="Client_download_title">
		<img class="show_img" src="resources/Client_download_title.png">
		<div class="Client_download_Edition">版本号：V 2.1.1</div>
	</div>
	<div class="Client_download_dow">

		<div class="Client_download_iPhone">
			<a class="J-call-app" id="ios_a" href="https://itunes.apple.com/cn/app/jiu-bian-li/id741897886?mt=8" target="_blank">
				<img class="show_img" alt="酒速达苹果IOS下载" src="resources/Client_download_iPhone.png"></a>
		</div>
		<div class="Client_download_Android">
			<a class="J-call-app" id="android_a" href="http://www.jiusuda.com/app/jiusuda.apk" target="_blank">
				<img class="show_img" alt="酒速达安卓APP下载" src="resources/Client_download_Android.png" style="margin-top: 7px;"></a>
		</div>
	</div>
	<script>  
		var ua = navigator.userAgent.toLowerCase();
		var t;
		var config = {
			/*scheme:必须*/
			scheme_IOS: 'MobileMall://',
			scheme_Adr: 'com.softbest1.mall://app/openwith',
			download_ios_url: "https://itunes.apple.com/cn/app/jiu-bian-li/id741897886?mt=8",
			download_android_url: "http://www.jiusuda.com/app/jiusuda.apk",
			timeout: 100
		};
		function openclient() {
			$(".Client_download").height($(".Client_download").width() * 1006 / 640 + "px");
			if(ua.indexOf('os') > 0){
				var btn = document.getElementById("ios_a"); 
				btn.click(); 
			} else {
				var btn = document.getElementById("android_a"); 
				btn.click(); 
			}
		//	var ifr = document.createElement('iframe');
		//	ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
		//	ifr.style.display = 'none';
		//	document.body.appendChild(ifr);
		//	window.setTimeout(function () {
		//		document.body.removeChild(ifr);
		//	}, config.timeout);
		}

		$(".J-call-app").click(openclient);
		var browser = {
			versions: function () {
				var u = navigator.userAgent, app = navigator.appVersion;
				return {
					//移动终端浏览器版本信息 
					trident: u.indexOf('Trident') > -1, //IE内核 
					presto: u.indexOf('Presto') > -1, //opera内核 
					webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 
					gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核 
					mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端 
					ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端 
					android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 
					iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器 
					iPad: u.indexOf('iPad') > -1, //是否iPad 
					webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部,
					WeiXin: u.match(/MicroMessenger/i) == "MicroMessenger" //是否为微信客户端
				};
			}(),
			language: (navigator.browserLanguage || navigator.language).toLowerCase()
		};
		var ua = navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == "micromessenger") {
			document.body.style.backgroundColor="#FFF";
			$("#view_1").show();
			$("#view_2").hide();
		} else {
			//$(".Client_download").hide();
			openclient();
			if (browser.versions.ios) {					 
				$(".Client_download_Android").hide();
				$(".Client_download_iPhone").show();
				InfoStatistics("IOS");		   
			} else if (browser.versions.android) {				   
				$(".Client_download_iPhone").hide();
				$(".Client_download_Android").show();
				InfoStatistics("Android");			 
			}
		}

		$(function () {
			$(".Client_download").height($(".Client_download").width() * 1006 / 640 + "px");
		});
		function InfoStatistics(Platform) {   
			console.log("-----"+Platform);
		}
	</script>
</div>
</body></html>
记录开发过程中的点滴！
原文链接：https://blog.csdn.net/u010304626/article/details/51071902
你可能也喜欢
