腾讯QQ空间应用宽屏接入

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；平台运营区宽度以及两侧间距宽度：动态变化 

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