流动应用画布说明

目录

What's New?

2013年1月8日起,朋友平台支持流动应用画布特性。
2012年9月21日起,支持开发者在管理中心中自行选择是否为宽度自适应模式。详见下文第3节:宽度自适应设置说明

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

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

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

2. 流动应用画布宽度以及应用展示规则

流动应用画布会随用户浏览器宽度的变化而动态变化。计算公式如下:

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

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

(3)当应用浏览器窗口宽度小于或等于1024时:
应用画布宽度 = 760px
其它要素宽度为:
空间动态条宽度:45px;平台运营区宽度以及两侧间距宽度:动态变化

应用展示规则如下:
1. 如果应用不支持宽度自适应,其宽度固定为760px时,则将在画布宽度区域中保持居中显示(详见下图1)。

2. 如果应用支持宽度自适应,则应用内容将随着应用画布的变化而动态填满应用画布。这里分为三种情况:
(1)如果用户浏览器宽度大于1280px,则应用画布宽度固定为950px。即应用内容最多可以填充950px区域的宽度(详见下图2)。
(2)如果用户浏览器宽度在(1024, 1280]px区间内时,应用内容随着应用画布的变化(变化区间为[760,950])而动态填满应用画布(详见下图3)。
(3)如果用户浏览器宽度小于或等于1024时,则应用画布宽度固定为760px。即画布缩小到应用的最小宽度(760px)时将不会再缩小,浏览器出现横向滚动条,保证应用的基本体验(详见下图4)。

图1:
fluid_canvas_2.png

图2:
fluid_canvas_4.png

图3:
fluid_canvas_1.png
图4:
fluid_canvas_3.png

3. 宽度自适应设置说明

特别说明:
1. 非多区多服应用,可以不实现宽度自适应,即保持应用内容固定宽度不变,则当画布宽度随着浏览器的变化而超过该固定宽度时,应用内容将居中显示,而画布两侧留白(如上图1所示),这样的话不能很好的利用用户浏览器窗口的空间,用户体验较差。

2. 所有多区多服应用自动支持从选取页面进入应用时的全屏模式,因此无需选择宽度自适应模式。

3. 固定宽度(开发者指定的760px-950px之间的任意整数)和自适应宽度,这两种模式只能二选一。应用上线前上线后都可以重新选择。

宽度自适应设置说明:

登录open.qq.com后进入管理中心,在“应用管理”tab的“平台信息”页面,选择“自适应”。如下图所示:
front_page_standard_21.png

4. 宽度自适应开发和联调说明

1. 应用通过监测画布区域的尺寸变化,对应用内容的尺寸进行动态调节,实现应用宽度自适应。注意必须符合上文第2节所述的“流动应用画布宽度以及应用展示规则”。

2. “开发者”应用目前只能支持760px的宽度,为此空间平台提供了调试环境host,可以通过配置host预览应用,体验是否真正实现了自适应(即实现上面图2,图3,图4所示的效果)。

调试环境host的配置方法如下:
在本地机器上打开“c:\windows\system32\drivers\etc\”路径下的“hosts”文件,在该文件中添加如下所示的一行配置,然后使用域名访问您的应用进行预览。
QQ空间平台的host:

113.108.76.191 appframe.qq.com

腾讯朋友平台的host:

113.108.76.191 apppframe.pengyou.com


3. 应用提交申请给腾讯开放平台打开自适应的开关,外网生效。目前正在试点期间(可按照下文第4节方式提出试点申请)。试点期后,将实现自助申请。

以上信息是否解决您的问题?

Copyright © 1998 - 2017 Tencent. All Rights Reserved.

腾讯公司 版权所有

有问必答 返回顶部