QQ 空间接入宽屏。 (与腾讯微博分属两个不同平台)

相关文档: 

流动应用画布说明

前端页面规范

多区多服场景说明

应用宽屏根据游戏分为两种。 

1: 普通游戏,但想要实现宽屏显示。

2: 多区多服的游戏,平台默认实现宽屏模式。 见 多区多服场景说明 。

关于页面宽度规格:

1. 多区多服应用自动支持从选取页面进入应用时的全屏模式。
2. 非多区多服应用可以自行选择如下2种宽度模式中的1种,二者只能选其一,应用上线前上线后都可以重新选择:

模式一:开发者可以指定一个应用的固定宽度,该宽度的范围为760px-950px之间的任意整数值。如果不指定则默认为760px。
指定该固定宽度后,应用的宽度即固定为指定的值,应用上线前上线后都可以调整该固定值。
指定宽度的方式为:
登录open.qq.com后进入管理中心,在“应用管理”tab的“平台信息”页面,填写应用宽度。

模式二:开发者可以选择应用宽度为自适应模式,则应用内容将根据用户屏幕宽度进行自适应显示,在760px-950px之间进行自适应调整。
指定自适应模式的方式为:登录open.qq.com后进入管理中心,在“应用管理”tab的“平台信息”页面,选择“自适应”。
注意:
应用如果选择了自适应模式,则必须自己在应用内先实现宽度自适应。

这里介绍普通游戏的宽屏实现。

1. 什么是流动应用画布?

流动应用画布(Fluid Canvas)是指应用画布可以随着用户浏览器窗口的宽度自由延展。应用画布将占满用户浏览器窗口中非平台运营区的全部空间,并随着用户窗口大小的变化而扩大或缩小。
应用如果支持宽度自适应,就可以最大限度的利用用户浏览器的窗口空间,提供更好的宽屏体验。

注意:
该特性目前仅支持QQ空间和腾讯朋友平台上的已上线应用。

(1)用户浏览器宽度大于1280px时:
应用画布宽度 = 950px (注:平台为了后续扩展,预留了一些宽度buffer,测试的时候大于950也许可以显示,但超过950可能导致将来画面被截断)
其它要素宽度为:
空间动态条宽度:45px;平台运营区宽度:180px;两侧间距宽度:动态变化 (2)当应用浏览器窗口宽度在(1024, 1280]px区间内时:
应用画布宽度:在[760,950]之间动态变化(注:平台为了后续扩展,预留了一些宽度buffer,测试的时候大于950也许可以显示,但超过950可能导致将来画面被截断)
其它要素宽度为:
空间动态条宽度:45px;平台运营区宽度:180px;两侧间距宽度:动态变化 (3)当应用浏览器窗口宽度小于或等于1024时:
应用画布宽度 = 760px
其它要素宽度为:
空间动态条宽度:45px;平台运营区宽度以及两侧间距宽度:动态变化

具体情况效果见 流动应用画布说明

  

腾讯QQ空间应用宽屏接入的更多相关文章

  1. 腾讯QQ空间超分辨率技术TSR

    腾讯QQ空间超分辨率技术TSR:为用户节省3/4流量,处理效果和速度超谷歌RAISR 雷锋网AI科技评论: 随着移动端屏幕分辨率越来越高,甚至像iPhone更有所谓的“视网膜屏”,人们对高清图片的诉求 ...

  2. jQuery插件实现图片展开效果,jquery.gallery。仿腾讯QQ空间说说图片展示效果。

    公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...

  3. 腾讯QQ空间穿越时光轴3D特效

    <DOCTYPE html> <html> <head> <title>腾讯QQ空间穿越光轴3D特效</title> <style&g ...

  4. iPad开发--QQ空间,处理横竖屏布局,实现子控件中的代理

    一.主界面横竖屏效果图 二.主界面加载, 初始化Dock(红色框的控件),判断程序启动时的屏幕方向.调用自己- (void)transitionToLandScape:(BOOL)isLandScap ...

  5. 然并卵,腾讯QQ认证空间又再次关闭申请

    昨天发布的腾讯QQ认证空间又开放申请的消息,此消息一放出,大家都去关注认证的事情,而马浩周发现在4月27日下午4-5点,腾讯QQ空间认证又再次关闭页面开放申请的通知,变成了以前停止审核的通知了. 可能 ...

  6. TOP100summit:【分享实录-QQ空间】10亿级直播背后的技术优化

    本篇文章内容来自2016年TOP100summit QQ空间客户端研发总监王辉的案例分享.编辑:Cynthia 王辉:腾讯SNG社交平台部研发总监.腾讯QQ空间移动客户端技术负责人高级工程师.09年起 ...

  7. 【腾讯bugly干货】QQ空间直播秒开优化实践

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址为:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1204&am ...

  8. 腾讯QQ认证空间4月27日已全面开放申请,欲进军自媒体

    今天看到卢松松的博客上爆出,腾讯QQ认证空间4月27日已全面开放申请的消息,这一消息出来, 马浩周根据提示方法进行申请,下面先说说腾讯QQ认证空间的申请方法: QQ认证空间开放申请公告地址:http: ...

  9. 分享到QQ空间、新浪微博、腾讯微博的代码

    今天公司原来的分享代码,在IE下有问题.网上找了下网上的分享代码. 给网页加上分享代码,借助网友的力量推广网站,目前已经很流行了 以下是网页代码 QQ空间分享代码如下: <a href=&quo ...

随机推荐

  1. 在eclipse中画类图

    学习设计模式的时候,希望能够画出类图,理清关系.但是StarUML还有重新去写类名.属性.方法等,不是很方便.网上给出了安装插件的方法额,就可以直接在eclipse中拖拽类,很方便.但是网上给出的插件 ...

  2. 蓝桥杯 算法提高 金属采集 [ 树形dp 经典 ]

    传送门 算法提高 金属采集 时间限制:1.0s   内存限制:256.0MB     锦囊1   锦囊2   锦囊3   问题描述 人类在火星上发现了一种新的金属!这些金属分布在一些奇怪的地方,不妨叫 ...

  3. idea-自定义Java模板文件

    自定义 idea Java 模板步骤. #parse("File Header.java")表示引用的模板文件,如下:

  4. msp430项目编程07

    msp430中项目---简单计算器 1.扫描键盘工作原理 2.电路原理说明 3.代码(显示部分) 4.代码(功能实现) 5.项目总结 msp430项目编程 msp430入门学习

  5. python学习之-- 面向对象

    面向对象(简写:OOP) 面向对象编程定义:利用类和对象来创建各种模型,来实现对真实世界的描述. 优点:使程序更容易理解和维护以及扩展代码. 类定义:用来描述具有相同的属性和方法的对象的集合.(简单讲 ...

  6. HUNAN 11567 Escaping (最大流)

    http://acm.hunnu.edu.cn/online/?action=problem&type=list&courseid=0&querytext=&pagen ...

  7. THUPC2018看题总结

    THUPC2018看题总结 #6387. 「THUPC2018」绿绿与串串 / String 据说是签到题啊. 首先根据题目的意思,我们发现如果能找到那个最后一次选择的对称轴岂不是美滋滋. 自然地,我 ...

  8. POJ 1797 【一种叫做最大生成树的很有趣的贪心】【也可以用dij的变形思想~】

    题意: 给一个无向图,找1到n所有的路中每条路最小权值的最大值! 屌丝一开始的思想是利用dij的变形~ 但是==屌丝忘记了更新dis数组~结果TLE无数次... 说正经的~dij的变形思想是这样的if ...

  9. HDU 1896 【留个使用priority_queue容器的样例】

    感谢<啊哈!算法>的讲解,水鸟弄懂了什么是优先队列. 题意是:在路上有很多石子,给出他们的初始位置和小明能够将他们扔出的距离,当小明遇到奇数个石子的时候就会把它扔出,遇到偶数个就会忽略他, ...

  10. HOST绑定和VIP映射

    今天上线需要配置RAL,处理半天,发现是需要HOST和IP分开来配. 比如: curl -H "Host: ktvin.nuomi.com" "http://10.207 ...