根据不同设备
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>
雪狐狸手机版下载
</title>
<script src="http://resource.yatiku.com/resources/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
body {
background: #fff;
font-family: "苹方Regular";
}
.loadapp {
color: #fff;
display: inline-block;
margin-left: 3px;
vertical-align: middle;
}
.bgimg {
vertical-align: middle;
display: inline-block;
background-size: cover;
width: 22px;
height: 20px;
background-image: url(http://resource.yatiku.com/resources/images/share/shareus/login.png);
}
.bgcolor {
background-size: cover;
background: #ff9999;
border-radius: 15px;
width: 110px;
margin: 30px auto;
text-align: center;
padding: 6px 12px;
}
h4 {
font-size: 20px;
text-align: center;
font-weight: 200;
margin: 17px 0px 0px;
}
article {
padding: 15px 5px 5px 5px;
border-top: 1px solid #ededed;
margin: 0 15px;
text-align: center;
}
article img.appbg {
width: 100%;
/*padding: 10px;*/
}
.erweimaimg {
border-top: 1px solid #ededed;
text-align: center;
margin: 15px;
color: #464646;
}
.erweimaimg img {
width: 50%;
margin-top: 20px;
}
.head {
background: rgba(0, 0, 0, .3);
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 5px 0px;
font-size: 14px;
color: #464646;
}
.head img {
width: 35px;
height: 35px;
vertical-align: middle;
margin: 0px 10px;
}
.head .login {
font-size: 12px;
color: #fff;
background: #FF9999;
padding: 8px 15px;
display: inline-block;
border-radius: 10px;
}
body {
padding: 0px;
margin: 0px;
font-size: 15px;
text-align: center;
line-height: 180%;
color: #999;
}
h1 {
color: #096;
font-size: 20px;
border-bottom: 1px solid #096;
border-top: 1px solid #096;
width: 225px;
margin: 10px auto;
}
a {
color: #FFF;
font-size: 20px;
display: block;
margin: 10px;
text-decoration: none;
padding: 5px;
border-radius: 5px;
background-color: #F90;
}
img {
width: 100%;
}
.mask {
position: fixed;
width: 80px;
height: 80px;
right: 0;
}
.iphoneimg {
width: 100%;
height: -webkit-calc(100vh);
height: calc(100vh);
}
.pcbg {
/*background-repeat: no-repeat;
background-image: url(http://resource.yatiku.com/resources/images/share/shareus/2.png);
background-size: contain;
width: 100%;
height: 600px;*/
}
.pcbg img {
/*width: 1024px;
vertical-align: bottom;
margin: auto;
height: 600px;*/
}
.pcbottom img {
width: 1024px;
vertical-align: bottom;
}
.loadimg {
width: 1024px;
margin-top: -648px;
height: 640px;
vertical-align: top;
}
.pcbgimg {
height: 600px;
}
</style>
</head>
<body>
<div id="total">
<div class="head">
<img src="http://resource.yatiku.com/resources/images/share/shareus/logo.png" alt="" />
<span>雪狐狸：学护理就用雪狐狸</span>
<span class="login">下载</span>
</div>
<main class="main">
<article style="margin-top: 70px;border:1px solid transparent">
<img src="http://resource.yatiku.com/resources/images/share/shareus/logo.png" alt="" style="width:60px; margin: auto;" />
<h4 style="margin-top: 7px;">雪狐狸</h4>
<p style="text-align: justify;">这是一款专注于护理领域的手机免费app。雪狐狸是集护考题库、校园社群、互动资讯于一身的大型护理平台，拥有超过100万的用户群体、10万护考资源数据。这么好的APP，你怎么能错过?</p>
<div class="bgcolor">
<span class="bgimg"></span>
<span class="loadapp">立即下载</span>
</div>
<img src="http://resource.yatiku.com/resources/images/share/shareus/4.jpg" alt="" class="appbg" />
</article>
<article>
<h4>资讯</h4>
<p>护考资讯、行业消息24小时实时更新，动态追踪护士全数据，我们只传达第一手消息。</p>
<img src="http://resource.yatiku.com/resources/images/share/shareus/1.jpg" alt="" class="appbg" />
</article>
<article>
<h4>学习</h4>
<p>8大模块全方位协助学习，专业性、趣味性、科学性并存，让你学习更加得心应手。</p>
<img src="http://resource.yatiku.com/resources/images/share/shareus/2.jpg" alt="" class="appbg" />
</article>
<article>
<h4>名师课程</h4>
<p>业内精英讲师录制重难点的讲解视频，视频详解颠覆传统学习，准确掌握知识点。</p>
<img src="http://resource.yatiku.com/resources/images/share/shareus/3.jpg" alt="" class="appbg" />
</article>
<div class="erweimaimg">
<img src="http://resource.yatiku.com/resources/images/share/shareus/er.png" alt="" />
<p>扫一扫下载雪狐狸app</p>
</div>
</main>
</div>
<script type="text/javascript">
// 获取终端的相关信息
var Terminal = {
// 辨别移动终端类型
platform: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
// android终端或者uc浏览器
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
// 是否为iPhone或者QQHD浏览器
iPhone: u.indexOf('iPhone') > -1,
// 是否iPad
iPad: u.indexOf('iPad') > -1
};
}(),
// 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
</script>
<script type="text/javascript">
var pcHtml = ' <div class="pc"><div class="pcbg"><img src="http://resource.yatiku.com/resources/images/share/shareus/2.png" class="pcbgimg"><img src="http://resource.yatiku.com/resources/images/share/shareus/1.png" class="loadimg"/></div><div class="pcbottom"><img src="http://resource.yatiku.com/resources/images/share/shareus/3.png"/><img src="http://resource.yatiku.com/resources/images/share/shareus/4.png"/><img src="http://resource.yatiku.com/resources/images/share/shareus/5.png" /></div></div>';
var iphonehtml = '<div class="mask"></div><img src="http://resource.yatiku.com/resources/images/share/shareus/mask.png" class="iphoneimg"/>';
$(document).ready(function() {
$(".bgcolor").click(function() {
$("#total").hide();
choose();
});
$(".login").click(function() {
$("#total").hide();
choose();
});
if(!Terminal.platform.android && !Terminal.platform.iPhone && !Terminal.platform.iPad) {
$("#total").remove();
$('body').append(pcHtml);
}
});
function choose() {
if(Terminal.platform.android) {
window.location.href = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.youxuedianzi.xuehuli';
} else if(Terminal.platform.iPhone) {
$('body').append(iphonehtml);
$(".mask").click(function() {
$(".iphoneimg").remove();
$(".mask").remove();
$("#total").show();
})
} else if(Terminal.platform.iPad) {
$('body').append(iphonehtml);
$(".mask").click(function() {
$(".iphoneimg").remove();
$(".mask").remove();
$("#total").show();
})
}
}
</script>
</body>
</html>
