各产品线移动端基础规范
互娱移动端文档：http://tgideas.qq.com/cguide/#JS_other3（Tips：按钮记得加流量检测码）
motion：http://tguide.qq.com/motion.html
蓝钻移动端文档：http://gamevip.qq.com/widget/guide/html/guide-mobile.html#a-guide-dir
腾讯动漫(H5)：http://ac.qq.com/event/CPGuide/index.html
京东微信/手Q：http://ecp.jd.com/ecdart3/c/front-end-spec
心悦俱乐部：http://xinyue.qq.com/xguide/xguide.shtml
互娱移动端登录
外调JS：//ossweb-img.qq.com/images/js/mobile_bundle/util/zepto.js
外调JS：//ossweb-img.qq.com/images/js/mobile_bundle/milo.js
<div class="dlbox">
<div id="unlogin">hi，亲爱的<a id="ptLoginBtn" href="javascript:void(0);">登录</a></div>
<div style="display:none;" id="logined" class="logined">
hi，<span id="login_nickname_span"></span><span id="x5_diamond_content"></span>，您好！<span id="spanNotBind_453677" >
<a href="javascript:amsInit(143498, 453676);"> 【绑定大区】</a>
</span><span id="spanBind_453677" style="display:none">
<span id="plat_info_453677" style="display:none"></span>
<span id="area_info_453677" ></span>
<a href="javascript:amsSubmit(143498,453679);">【我的礼包】</a>
<a href="javascript:amsInit(143498, 453676);">【更改绑定】</a>
</span><a id="ptLogoutBtn" href="javascript:void(0)">注销</a>
</div>
</div>
<script>
milo.addEvent(g("ptLoginBtn"), "click", function() {
need('biz.loginManager',function(LoginManager){
LoginManager.login();
});
return false;
});
milo.addEvent(g("ptLogoutBtn"), "click", function() {
need('biz.loginManager',function(LoginManager){
LoginManager.logout();
});
return false;
});
milo.ready(function() {
need("biz.login",function(LoginManager){
LoginManager.checkLogin(function(){
//amsInit(143498, 453677);
$("#login_nickname_span").text(LoginManager.getNickName());
});
});
});
</script>
外调JS：//ossweb-img.qq.com/images/js/mobile_bundle/milo.js
常用小组件(互娱)
文件来源于：TGideas http://tgideas.github.io/motion/doc/data/component/mo.PageSlide.html
上下全屏切换slideUpDown左右全屏切换slideLeftRight
外调：http://ossweb-img.qq.com/images/js/zepto/zepto.min.js
外调：http://ossweb-img.qq.com/images/js/motion/slide.v2.0.min.js
Zepto(function($){
window.pageSlide = new mo.Slide({
target: $('.slide li'),
circle: true, //是否循环
effect: 'push'
// effect: 'flip'(3D翻转) 'push'(推动)
// effect: 'push'
// effect: 'flip'
});
});
Tab切换简单
外调：http://ossweb-img.qq.com/images/js/motion/slide.v2.0.min.js
Zepto(function($){
window.pageSlide = new mo.Slide({
target: $('.slide li'),
circle: true, //是否循环
effect: 'push'
// effect: 'flip'(3D翻转) 'push'(推动)
// effect: 'push'
// effect: 'flip'
});
});
外调：http://ossweb-img.qq.com/images/js/zepto/zepto.min.js
$('.tab .hd li').bind('click', function () {
var _e = $(this).index();
$('.tab .hd li').removeClass('on');
$(this).addClass('on');
$('.tab-panel').hide();
$('.tab-panel').eq(_e).show();
});
Tab组件调用
$('.tab .hd li').bind('click', function () {
var _e = $(this).index();
$('.tab .hd li').removeClass('on');
$(this).addClass('on');
$('.tab-panel').hide();
$('.tab-panel').eq(_e).show();
});
外调：http://ossweb-img.qq.com/images/js/zepto/zepto.min.js
外调：http://ossweb-img.qq.com/images/js/motion/tab.min.js
$(function(){
window.tab1 = new mo.Tab({
target: $('#tab01 .content li'),
controller: $('#tab01 .controller li'),
lazy: true
});
});
PC相互跳转
外调：http://ossweb-img.qq.com/images/js/motion/tab.min.js
$(function(){
window.tab1 = new mo.Tab({
target: $('#tab01 .content li'),
controller: $('#tab01 .controller li'),
lazy: true
});
});
H5里跳转到PC
if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = "http://csquansu.com/";
}
判断微信、手Q
if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
window.location = "http://csquansu.com/";
}
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
alert('isWeiXin')
$('.weixin').show();
$('.qq').hide();
}else if(ua.indexOf('qq/')!= -1){
alert('isQQ')
}else{
alert('非QQ 非微信')
} }
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
alert('isWeiXin')
$('.weixin').show();
$('.qq').hide();
}else if(ua.indexOf('qq/')!= -1){
alert('isQQ')
}else{
alert('非QQ 非微信')
} }
字号自适应
@media改变父级字号，整个文档的大小跟着改变，把px单位换算成em，成为弹性大小。
或者使用rem相对单位，@media修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
文本字体大小14px、16px，标题18px或以上，不需要针对不同分辨率做不同配置,手机或者平板上查看文章14、16号字就很舒服了，过大的文字反而显得更突兀。
Tips：字号一般不需要自适应
mediaFontsize
JS Html FontSize实例应用
或者使用rem相对单位，@media修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
文本字体大小14px、16px，标题18px或以上，不需要针对不同分辨率做不同配置,手机或者平板上查看文章14、16号字就很舒服了，过大的文字反而显得更突兀。
Tips：字号一般不需要自适应
mediaFontsize
JS Html FontSize实例应用
居中与背景平铺
安全内容范围内，上下左右居中。（position:absolute;left:50%;top:50%;margin:-(height/2)px 0 0 -(width/2)px;）
background-size:cover（等比放大图片，背景覆盖全屏）
Tips：内容与背景分离，修饰性背景图片可使用本方法。内容相对背景定位有严格要求的不推荐。
示例DEMO
background-size:cover（等比放大图片，背景覆盖全屏）
Tips：内容与背景分离，修饰性背景图片可使用本方法。内容相对背景定位有严格要求的不推荐。
示例DEMO
@media媒体查询
@media(条件){……}
@media only screen and (width:414px){#wrap{zoom:1.104;}}
@media only screen and (width:320px){#wrap{zoom:0.853333333333333;}}
@media only screen and (width:320px){#wrap{zoom:0.853333333333333;}}
/* mobile adaptation start */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
.topbox{padding-top:50px;}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
.topbox{padding-top:70px;}
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
.topbox{padding-top:100px;}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
.topbox{padding-top:130px;}
}
/* mobile adaptation end */
示例DEMO
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
.topbox{padding-top:50px;}
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
.topbox{padding-top:70px;}
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 */
.topbox{padding-top:100px;}
}
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone6 Plus */
.topbox{padding-top:130px;}
}
/* mobile adaptation end */