【无标题】移动端App下载页面模版

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自由装装修APP</title>
   <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black">

</head>

<body>
<div class="app">
   <div class="logo"> <img src="unpackage/res/icons/96x96.png"><span>官方</span></div>
   <h3>自由装装修</h3>
   <dt>自由装装修，让装修更简单更透明更自由</dt>
   <a href="javascript:" class="but">下载</a>
</div>
<div class="sm">
   <p>开发者：湖南自由装科技有限公司</p>
   <p>版本：1.0.922</p>
</div>
<div class="popover">
   <div class="text">
       <p>1、点击右上角的
       <span class="icon iconfont icon-more"></span>
       <img src="data:images/jt.png" alt="">
       </p>
       <p>2、选择在浏览器打开即可正常下载</p>
   </div>
   <div class="mask"></div>
</div>
</body>
<style type="text/css">
.app{text-align: center; position: fixed;width: 100%; top: 20%;}
.logo{height: 68px;width: 68px;position: relative;margin: 0 auto;}
.logo img{width: 100%;border-radius: 10px;}
.logo span{position: absolute;background: #007bff;color: #fff;display: block;top: -6px;right: -10px;padding: 0 5px;font-size: 1.0erm;}
.app h3{font-weight: normal;font-size: 16px;margin-top: 15px;}
.app dt{font-size: 13px;margin-top: 10px;color: #666;}
.app a{
background: #007bff;
display: block;
width: 200px;
color: #fff;
text-decoration: none;
line-height: 34px;
border-radius: 3px;
margin: 0 auto;
margin-top: 30px;}
.sm{text-align: center;position: fixed;bottom: 15px;width: 100%;color: #7d7d7d;}
.popover{position: fixed;width: 100%;height: 100%;
display: none;}
.popover .mask{background: #000;width: 100%;height: 100%;display: block;opacity: 0.7;z-index: 1;}
.text{position: relative;z-index: 9999;margin-top: 40px;padding: 20px 10%;color: #fff;}
.text p{margin-top: 20px;font-size: 18px; font-family: initial;}
.text img{position: absolute;width: 20px;bottom: 70px;margin-left: 20px;}
</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
   var ua = navigator.userAgent.toLowerCase();
   var uUserAgent = navigator.userAgent;
   var isAndroid = uUserAgent.indexOf('Android');
   if(ua.match(/MicroMessenger/i)=="micromessenger"){
   $('.popover').show();
   }else{
   $('.popover').hide();
   }
   $('.but').click(function(){
       if(ua.match(/MicroMessenger/i)=="micromessenger"){
           //微信
       if(isAndroid > -1){
           alert('请去浏览器里面下载')
       }else{
       // Toast('请去App Store中进行下载')
           window.location.href = 'https://apps.apple.com/cn/app/%E8%87%AA%E7%94%B1%E8%A3%85%E8%A3%85%E4%BF%AE/id1551584473'
       }
       }else{
           if(isAndroid > -1){
               window.location.href = 'https://zyz68.com/app/zyzApp.apk';
           }else{
           // Toast('请去App Store中进行下载')
           window.location.href = 'https://apps.apple.com/cn/app/%E8%87%AA%E7%94%B1%E8%A3%85%E8%A3%85%E4%BF%AE/id1551584473'
           }

       }
   });
</script>

【无标题】移动端App下载页面模版相关推荐

app下载页面html源码，带弹幕，3分钟安装
一.图片二. 下载与用途: app下载页面高改造潜力.zip - 蓝奏云文件大小:1.1 M|[使用说明] 下载后上传到服务器解压即可然后打开文件index.html修改成你的个人信息就可以了, ...
Bootstrap实现的响应式APP下载页面代码
这次分享的是,一个设计优雅的APP下载页面主题,这套HTML是用当下最流行的Bootstrap框架实现的版本是v3.3.3,这套代码非常适合再次开发,代码简介没有多余的部分,结构组织清晰,代码注释完整 ...
影视APP下载页面自适应html源码
介绍: 影视APP下载页面自适应html源码苹果安卓pc 用记事本打开修改你app下载地址就可以了,然后上传主机根目录解压运行就行了. 网盘下载地址: http://kekewangLuo.cc/X ...
一款挺好看的南瓜影视APP下载页面
介绍: 一款挺好看的南瓜影视APP下载页面网盘下载地址: http://kekewangLuo.cc/Jk44osMc6bL0 图片:
H5 引用vue 打开app（如何该手机内有某个app则直接打开app，如果没有则跳转app下载页面）
H5 引用vue 打开app(如何该手机内有某个app则直接打开app,如果没有则跳转app下载页面) **ps: 一定一定一定一定先向 ios要 ( ios下载地址和 ios对应的app协议 ), ...
培养逻辑思维的app_逻辑思维学生端下载-逻辑思维学生端app下载1.1.22安卓版-西西软件下载...
逻辑思维学生端app是一款专门学生打造的课后移动学习平台,学生可以使用这款软件进行课后巩固练习,而家长可以在家长端app同步查看学生的任务完成情况,并可以和孩子进行互动交流,需要的朋友可以来西西下载逻 ...
js调用APP后，如果有App直接进App，没有则进入App下载页面
在网上找了一圈,都没有合格的. 看下边这段 setTimeout(function() {alert('你还没安装,去下载去');// 去某个下载页面// const u = navigator.us ...
vue实现app下载页面，微信提示，自动识别安卓IOS
vue实现app下载引导页,目标:手机微信打开时提示用户从浏览器打开.手机浏览器访问时,点击下载按钮自动识别安卓IOS跳转对应下载页面. 例子使用的是vue+脚手架(vue-cli)搭建,具体流程网上 ...
uniapp 电商app 下载页面功能实现
下载页面效果图要求如下: 立即邀请按钮是个动态的,上下浮动并且尺寸或大或小的改变,可以通过css3动画来实现二维码是生成的,这个二维码是含有用户邀请码的,如果通过此二维码进行下载app. 点击保存 ...

【无标题】移动端App下载页面模版

【无标题】移动端App下载页面模版相关推荐

最新文章

热门文章