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>

记录开发过程中的点滴！

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

h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）
记录一个最近在微信端页面开发时出现的问题:页面在手机微信端和微信web开发者工具中都能正常显示,但是在pc端微信浏览器上打不开(显示空白). 原因:pc端微信浏览器不支持es6,而我的代码使用了 le ...
APP推广下载页，如何自动跳转各应用市场
APP推广下载页,起初的做法是自己提供一个下载地址,用户下载安装之后检测更新,获取最新版本.后来老板可能觉得这样不够智能,有点麻烦,就要改成自动跳转应用市场,直接安装最新版本的,这才有了下面的代码段( ...
标梵信息分享App推广登陆页面的制作方法
1. 列举了app推广登陆页面的常见形式和各种常见的衡量指标,梳理了做这个要注意的重点. 在移动互联网领域,登陆页面也称为推广页面.指南页面.登陆页面等.,通常以H5页面的形式显示.访客通过广告链接( ...
直播短视频手机APP应用下载页面静态html网页模板
介绍: 直播短视频手机APP应用下载页面静态html网页模板,上传服务器即可使用网盘下载地址: http://kekewl.cc/e7O1upV2sJR0 图片:
鸿蒙系统适配微信,微信鸿蒙版本下载-微信鸿蒙系统app官方下载 v8.0.3-手游之家...
微信鸿蒙版本:让用户随时可以和朋友在线聊天的软件,这里提供了非常多优质的聊天通道,用户可以随时享受最便捷的聊天方法,不仅可以进行文字以及图片的互动,而且还可以实时在线发布各种不同的语音以及视频等操作, ...
APP内如何打开某个应用的App Store下载页面
如何在App内打开某个应用的App Store下载页面,在很多 APP 中我们都见到过某些应用的推广广告,点击之后会模态到 App Store 应用详情页面,引导用户下载.那么我们怎么在自己的 APP ...
h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）...
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性解决:将ES6转换为 ...
APP推广下载域名链接在微信被拦截怎么办
身在网站要想在微信端被使用,多多少少都会有预防被拦截,是专门为运营网站和公众号的运营者一个研究的工具几十你是正常网站, 也是公司企业备案,照样也会被拦截.这个被拦截一般来说就是你的这个域名已经在微信中 ...
离开微信直接打开APP指定的页面
downLoad:function(){var option = {source: '22',shortName: 'invitenewusergivehbi',recommenduserid: th ...

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

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

最新文章

热门文章