《虚拟视口和具有光学缩放的固定定位.pdf》由会员分享，可在线阅读，更多相关《虚拟视口和具有光学缩放的固定定位.pdf（35页完整版）》请在专利查询网上搜索。
1、(10)申请公布号 CN 102929497 A (43)申请公布日 2013.02.13 CN 102929497 A *CN102929497A* (21)申请号 201210335705.X (22)申请日 2012.09.12 13/230473 2011.09.12 US G06F 3/0484(2013.01) (71)申请人 微软公司 地址 美国华盛顿州 (72)发明人 M.A. 拉科夫 S.Z. 马尔金 M.J. 恩斯 陈弋宁 C. 富尔蒂尼 S.G. 罗伯茨 M.J. 帕滕 N.R. 沃戈纳 (74)专利代理机构 中国专利代理(香港)有限公 司 72001 代理人 李静岚 汪。
2、扬 (54) 发明名称 虚拟视口和具有光学缩放的固定定位 (57) 摘要 本发明涉及虚拟视口和具有光学缩放的固定 定位。各种实施例利用了布局视口和与布局视口 分开的视觉视口。布局视口被用于诸如页面布 局操作以及向脚本报告文件对象模型值之类的事 情。布局视口可以被认为是与初始包含框大小相 当的初始矩形。初始包含框是包含对于用户来说 初始可见的网络内容的包含框。视觉视口与布局 视口分开并且允许相对于布局视口自由地操纵视 觉视口。 举例来说， 当视觉视口与布局视口的边界 相冲突时， 视觉视口可以任意 “推动” 布局视口。 视 觉视口可以被认为是对于用户来说可见的矩形。 (30)优先权数据 (51)I。
3、nt.Cl. 权利要求书 1 页 说明书 10 页 附图 23 页 (19)中华人民共和国国家知识产权局 (12)发明专利申请 权利要求书 1 页 说明书 10 页 附图 23 页 1/1 页 2 1. 具体实施计算机可读指令的一个或多个计算机可读存储介质， 当执行所述计算机 可读指令时实施包括以下步骤的方法 ： 利用布局视口来布置用于呈现在 web 浏览器中的内容 ； 在 web 浏览器中利用视觉视口， 在所述视觉视口之内至少一些布置的内容是可见的， 所述视觉视口是独立于布局视口可移动的， 所述视觉视口具有由相关联的光学缩放水平确 定的大小 ； 以及 启动视觉视口和布局视口之间的交互。 2.。
4、 权利要求 1 的一个或多个计算机可读存储介质， 其中所述视觉视口被配置为在布 局视口之内放大或缩小。 3. 权利要求 1 的一个或多个计算机可读存储介质， 其中所述布局视口被配置为具有 相对于该布局视口布置的固定位置元素。 4. 权利要求 1 的一个或多个计算机可读存储介质， 其中布置在所述布局视口之内的 并且位于视觉视口之外的内容是不可见的。 5. 权利要求 1 的一个或多个计算机可读存储介质， 其中所述视觉视口被配置为不延 伸到布局视口之外。 6. 权利要求 1 的一个或多个计算机可读存储介质， 其中所述视觉视口被配置为在布 局视口之内可调整大小。 7. 权利要求 1 的一个或多个计算机。
5、可读存储介质， 其中所述视觉视口被配置为使得 布局视口随着视觉视口一起移动。 8. 权利要求 1 的一个或多个计算机可读存储介质， 其中所述视觉视口被配置为使得 布局视口随着视觉视口一起移动， 并且其中所述布局视口被配置为具有当其随着视觉视口 一起移动时随其移动的固定位置元素。 9. 具体实施计算机可读指令的一个或多个计算机可读存储介质， 当执行所述计算机 可读指令时实施包括以下步骤的方法 ： 利用布局视口来布置用于呈现的内容 ； 利用视觉视口， 在所述视觉视口之内至少一些布置的内容是可见的， 所述视觉视口具 有由相关联的光学缩放水平确定的大小 ； 以及 修改视觉视口的大小以便适应覆盖式用户界。
6、面。 10. 权利要求 9 的一个或多个计算机可读存储介质， 其中所述视觉视口是独立于布局 视口可移动的。 权 利 要 求 书 CN 102929497 A 2 1/10 页 3 虚拟视口和具有光学缩放的固定定位 背景技术 0001 很多能触摸的 web 浏览器允许用户利用手势 （比如夹紧手势） 缩放网页。典型地， 缩放功能被实现为页面的光学的拉伸， 被称为 “光学缩放” 。 通过定义， 这与要求页面基于可 见区域重新布置的 W3C 标准相抵触。 0002 很多 web 浏览器基本上只是忽视该标准要求。而这又意味着其他特征停止工作或 者与预期相比更难工作。 这些特征包括固定位置元素和背景、 报。
7、告在脚本中的 （文件对象模 型） DOM 值以及页面布局的其他方面。这导致与使用这些特征的网站的兼容性问题， 常常到 了迫使这些站点创建针对特定浏览器或设备的特殊版本以便避免破坏的功能的程度。 发明内容 0003 提供概要来以简化的形式介绍将在下面的具体实施方式中进一步描述的概念的 选择。该概要并不意图识别要求保护的主题的关键特征或必要特征， 也不是意图被用于帮 助确定要求保护的主题的范围。 0004 各种实施例利用了布局视口和与布局视口分开的视觉视口。 布局视口被用于诸如 页面布局操作以及向脚本报告文件对象模型值之类的事情。 布局视口可以被认为是与初始 包含框大小相当的初始矩形。 初始包含框。
8、是包含对于用户来说初始可见的网络内容的包含 框。视觉视口与布局视口分开并且允许相对于布局视口自由地操纵视觉视口。举例来说， 当视觉视口与布局视口的边界相冲突时， 视觉视口可以任意 “推动” 布局视口。视觉视口可 以被认为是对于用户来说可见的矩形。 0005 在一个或多个实施例中， 固定元素被固定到布局视口， 并且视觉视口能够独立于 布局视口而摇动 （pan） 。 当视觉视口达到布局视口的边缘时， 布局视口能够开始与视觉视口 一起摇动。 0006 在一个或多个实施例中， 视口可以被独立地修改。 举例来说， 视觉视口的大小可以 被修改以便适应诸如屏幕上触摸键盘之类的覆盖式用户界面。 这可以启动固定。
9、元素内的附 加情景 （比如触摸输入） ， 并且当键盘可见时摇动 / 缩放固定元素。 附图说明 0007 参考附图描述具体的说明。在附图中， 附图标记最左边的 （多个） 数字指示该附图 标记首次在其中出现的附图。 在说明书和附图中的不同实例中使用的相同的附图标记可以 表明类似的或相同的项目。 0008 图 1 是根据一个或多个实施例的示例性实施方式中的环境的图示。 0009 图 2 是更加详细地示出图 1 的示例性实施方式中的系统的图示。 0010 图 3 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0011 图 4 示出了图示出根据一个或多个实施例的布局视口。
10、和视觉视口的一个可呈现 文件的视图。 说 明 书 CN 102929497 A 3 2/10 页 4 0012 图 5 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0013 图 6 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0014 图 7 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0015 图 8 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0016 图 9 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0017。
11、 图 10 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0018 图 11 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0019 图 12 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0020 图 13 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0021 图 14 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0022 图 15 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0023。
12、 图 16 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0024 图 17 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0025 图 18 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0026 图 19 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0027 图 20 示出了图示出根据一个或多个实施例的布局视口和视觉视口的一个可呈现 文件的视图。 0028 图 21 是描述了根据一个或多个实施例的方法中的步骤的流程图。 0029 图 22 是描述了根据一。
13、个或多个实施例的方法中的步骤的流程图。 0030 图 23 示出了可以被用来实施这里描述的各种实施例的示例性计算设备。 具体实施方式 0031 综述 各种实施例利用了布局视口和与布局视口分开的视觉视口。 布局视口被用于诸如页面 说 明 书 CN 102929497 A 4 3/10 页 5 布局操作以及向脚本报告文件对象模型值之类的事情。 布局视口可以被认为是与初始包含 框大小相当的初始矩形。初始包含框是包含对于用户来说初始可见的网络内容的包含框。 视觉视口与布局视口分开并且允许相对于布局视口自由地操纵视觉视口。举例来说， 当视 觉视口与布局视口的边界相冲突时， 视觉视口可以任意 “推动” 布。
14、局视口。视觉视口可以被 认为是对于用户来说可见的矩形。 0032 在一个或多个实施例中， 固定元素被固定到布局视口， 并且视觉视口能够独立于 布局视口而运动， 例如摇动。 当视觉视口达到布局视口的边缘时， 布局视口能够开始与视觉 视口一起摇动。 0033 在一个或多个实施例中， 视口可以被独立地修改。 举例来说， 视觉视口的大小可以 被修改以便适应诸如屏幕上触摸键盘之类的覆盖式用户界面。 这可以启动固定元素内的附 加情景 （比如触摸输入） ， 并且当键盘可见时摇动 / 缩放固定元素。 0034 在下面的讨论中， 首先描述可操作以采用这里描述的技术的示例性环境。然后描 述各种实施例的示例性图示说。
15、明， 其可以用在示例性环境中， 也可以用在其他环境中。因 此， 示例性环境并不限于施行所描述的实施例， 并且所描述的实施例并不限于实施在示例 性环境中。 0035 示例性环境 图 1 是可操作以采用在本文件中描述的直观显示技术的示例性实施方式中的环境 100 的图示。 所示出的环境100包括可以按照各种方式配置的计算设备102的示例。 举例来说， 计算设备102可以被配置为传统的计算机 （例如桌上型个人计算机、 膝上型计算机等） 、 移动 站、 娱乐设施、 通信地耦合到电视的机顶盒、 无线电话、 上网本、 游戏控制台、 手持式设备以 及如关于图 2 所进一步描述的。因此， 计算设备 102 的。
16、范围可以从具有充足的存储器和处 理器资源的全资源设备 （例如个人计算机、 游戏控制台） 到具有有限的存储器和 / 或处理器 资源的低资源设备 （例如传统的机顶盒、 手持式游戏控制台） 。计算设备 102 还包括使得该 计算设备 102 施行如下面所描述的一个或多个操作的软件。 0036 计算设备 102 包括提供如在本文件中所描述的功能的 web 浏览器 104。可以连同 任何适当类型的硬件、 软件、 固件或其组合来实施 web 浏览器。在至少一些实施例中， 以驻 留在某种类型的有形的计算机可读存储介质上的软件来实施 web 浏览器， 将在下面提供所 述存储介质的示例。 0037 Web 浏览。
17、器 104 表示使得用户能够浏览不同的网站并且消费与这些网站相关联的 内容的功能。如将在下面详细描述的， web 浏览器 104 包括视口模块 106， 该视口模块 106 包括布局视口模块107和视觉视口模块109。 应当认识到并且理解的是， 虽然视口模块被示 出为 web 浏览器的一部分， 但视口模块是可以被 web 浏览器 104 或其他应用利用的独立模 块。可替换地或附加地， 视口模块 106 可以包括不同于 web 浏览器 104 的一个或多个应用 的一部分。 0038 布局视口模块 107 实施布局视口， 其被用于诸如页面布局操作以及向脚本报告文 件对象模型值之类的事情。布局视口可。
18、以被认为是与初始包含框大小相当的初始矩形， 该 初始包含框包含对于用户来说初始可见的网络内容。 0039 视觉视口模块 109 实施视觉视口， 该视觉视口与布局视口分开并且允许相对于布 局视口自由地操纵该视觉视口。 举例来说， 当视觉视口与布局视口的边界相冲突时， 视觉视 说 明 书 CN 102929497 A 5 4/10 页 6 口可以任意 “推动” 布局视口。视觉视口可以被认为是对于用户来说可见的矩形。 0040 在一个或多个实施例中， 固定元素被固定到布局视口， 并且视觉视口能够独立于 布局视口而摇动。当视觉视口达到布局视口的边缘时， 布局视口能够开始与视觉视口一起 摇动。 0041。
19、 在一个或多个实施例中， 视口可以被独立地修改。 举例来说， 视觉视口的大小可以 被修改以便适应诸如屏幕上触摸键盘之类的覆盖式用户界面。 这可以启动固定元素内的附 加情景 （比如触摸输入） ， 并且当键盘可见时摇动/缩放固定元素， 如将在下面变得显而易见 的那样。 0042 计算设备 102 还包括手势模块 105， 其识别能够由一个或多个手指施行的手势并 且使得与这些手势相对应的操作能够施行。手势可以由模块 105 以各种不同方式来识别。 举例来说， 手势模块 105 可以被配置为识别触摸输入， 诸如接近使用触摸屏功能的计算设 备 102 的显示设备 108 的用户手的手指。模块 105 可。
20、以用于识别单个手指的手势和边框手 势 （bezel gesture） 、 多手指 / 相同手的手势和边框手势、 和 / 或多手指 / 不同手的手势和 边框手势。 0043 计算设备 102 还可以被配置为检测并且在 （例如由用户手的一个或多个手指提供 的） 触摸输入与 （例如由触针 116 提供的） 触针输入之间进行区分。可以以各种方式来施行 该区分， 比如通过检测由用户手的手指接触的显示设备 108 的量对比由触针 116 接触的显 示设备 108 的量。 0044 因此， 手势模块 105 可以支持各种不同的手势技术， 这是通过识别触针和触摸输 入以及各种不同类型的触摸输入之间的划分以及其。
21、影响 （leverage） 来实现的。 0045 图 2 示出了一种示例性系统 200， 其示出了浏览器 104、 手势模块 105 以及视口模 块106， 被实施在其中多个设备通过中央计算设备进行互连的环境中。 中央计算设备对于所 述多个设备来说可以是本地的， 或者对于所述多个设备来说可以是位于远程的。在一个实 施例中， 中央计算设备是 “云” 服务器群， 其包括通过网络或因特网或其他装置连接到多个 设备的一个或多个服务器计算机。 0046 在一个实施例中， 这种互连体系结构使得能够在多个设备中递送功能， 以便向多 个设备的用户提供通用的并且无缝的体验。多个设备中的每一个可以具有不同的物理要。
22、 求和能力， 并且中央计算设备使用平台， 以便能够向设备递送既是为该设备定制的也是对 于所有设备都通用的体验。在一个实施例中， 创建目标设备的 “类别” 并且为一般类别的设 备定制体验。设备的类别可以由所述设备的物理特征或使用或其他共同特性来限定。举例 来说， 如前面所描述的， 计算设备 102 可以以各种不同方式来配置， 比如用于移动 202、 计算 机 204 以及电视 206 的使用。这些配置中的每一种具有一般地相对应的屏幕大小， 并因此 计算设备 102 可以被配置为在这个示例性系统 200 中的这些设备类别中的一种。例如， 计 算设备 102 可以假定移动 202 类别的设备， 其包。
23、括移动电话、 音乐播放器、 游戏设备等。计 算设备 102 还可以假定计算机 204 类别的设备， 其包括个人计算机、 膝上型计算机、 上网本 等。电视 206 配置包括涉及偶然环境中的显示的设备配置， 例如电视、 机顶盒、 游戏控制台 等。因此， 这里所描述的技术可以由计算设备 102 的这些各种配置所支持， 并且并不限于在 下面的部分中描述的具体示例。 0047 云 208 被示出为包括用于 web 服务 212 的平台 210。平台 210 提取云 208 的硬件 说 明 书 CN 102929497 A 6 5/10 页 7 （例如服务器） 和软件资源的基础功能， 并因此可以充当 “云。
24、操作系统” 。举例来说， 平台 210 可以提取资源来将计算设备 102 与其他计算设备连接。平台 210 还可以用来提取资源的定 标 （scaling） 以便将相对应的标度的等级提供到所遭遇的对于经由平台 210 实施的 web 服 务 212 的需求。也可以预期各种其他的示例， 比如服务器群中的服务器的负载平衡、 保护不 受恶意方 （例如垃圾邮件、 病毒和其他恶意软件） 的伤害等。 0048 因此， 云 208 被包括为属于经由因特网或其他网络对于计算设备 102 可用的软件 和硬件资源的策略的一部分。 0049 由手势模块支持的手势技术可以利用移动配置 202 中的触摸屏功能、 计算机 。
25、204 配置中的跟踪板功能来检测， 通过作为不涉及与特定输入设备相接触的自然用户接口 （NUI） 的支持的一部分的摄影机来检测， 等等。此外， 可以在系统 200 当中到处分配检测和 识别输入以便认出特定手势的操作的施行， 比如通过计算设备 102 和 / 或由云 208 的平台 210 支持的 web 服务 212。 0050 一般来说， 这里所描述的任何功能都可以利用软件、 固件、 硬件 （例如固定逻辑电 路） 、 手动处理或这些实施方式的组合来实施。这里所使用的术语 “模块” 、“功能” 和 “逻辑” 一般来说表示软件、 固件、 硬件或其组合。 在软件实施方式的情况下， 模块、 功能或逻。
26、辑表示 当在处理器 （例如 CPU 或多个 CPU） 上执行或者由处理器执行时施行特定任务的程序代码。 程序代码可以存储在一个或多个计算机可读存储器设备中。 下面所描述的手势技术的特征 是独立于平台的， 这意味着可以在具有各种处理器的各种商业计算平台上实施这些技术。 0051 在下面的讨论中， 各个部分描述示例性实施例。标题为 “示例性视口交互” 的部分 描述示出了根据一个或多个实施例的视觉视口与布局视口之间的交互的多个情景。接下 来， 标题为 “示例性方法” 的部分描述根据一个或多个实施例的示例性方法。最后， 标题为 “示例性设备” 的部分描述可以被用来实施一个或多个实施例的示例性设备的各个。
27、方面。 0052 描述了可以在其中利用浏览器的示例性操作环境之后， 现在来考虑一种示例性浏 览器、 以及特别地根据一个或多个实施例的示例性视口交互的讨论。 0053 示例性视口交互 图 3 在 300 处， 一般性地示出了可以被看作是可呈现文件 302 的全知视图。该视图是 “全知的” ， 这是因为它既表示了由视觉视口限定的当前对于用户来说可见的内容， 又表示 了当前对于用户来说不可见 （如图中所示） 的内容。在所示出和所描述的实施例中， 光学缩 放水平确定了视觉视口的大小。 另外， 视觉视口确定了向用户示出的可呈现文件的内容， 正 如将在下面变得显而易见的那样。 0054 具体而言， 在该示。
28、例中， 在 304 处通过长虚线示出了布局视口。视觉视口 306 由细 虚线示出。在该特定示例中， 当页面加载时， 布局视口 304 和视觉视口 306 初始具有相同的 长宽比。正因如此， 布局视口 304 和视觉视口 306 初始是同延的 （coextensive） 。此外， 视 图 300 包括所谓的固定位置元素 308。该固定位置元素相对于布局视口 304 布置并且固定 在布局视口 304 之内。为了正在描述的示例继续， 将固定位置元素认为是社交网络聊天室， 比如可以在 Facebook 上可以找到的那种。 0055 回想一下， 布局视口被用于诸如页面布局操作以及向脚本报告文件对象模型 。
29、（DOM） 值之类的事情。在至少一些实施例中， 布局管线使用 DOM 来建立可呈现的显示树， 然 后显示模块将该显示树呈现为可以由用户通过 web 浏览器或其他适当配置的应用观看的 说 明 书 CN 102929497 A 7 6/10 页 8 内容。布局视口 304 可以被认为是与初始包含框大小相当的初始矩形。初始包含框是包含 对于用户来说初始可见的网络内容的包含框。视觉视口 306 与布局视口 304 分开并且允许 相对于布局视口 304 自由地操纵视觉视口 306。全知视图 300 中位于视觉视口 306 之外的 内容对于用户来说是不可见的。相反地， 它出现在图中是为了向读者提供用于各个。
30、视口之 间的交互的情境， 正如将在下面描述的那样。 0056 在所示出的和所描述的实施例中， 布局视口 304 和视觉视口 306 可以具有下列属 性， 这些属性对于其中内容出现在用户期望内容出现的地方的有组织的逻辑用户体验来说 有贡献并且有帮助。 0057 首先， 视觉视口306被配置为出现在布局视口304之内， 正如将在下面变得显而易 见的那样。具体而言， 至少在所示出和所描述的实施例中， 视觉视口 306 没有延伸到布局视 口304之外。 然而， 在一些实施例中， 视觉视口有可能大于布局视口。 在这种情况下， 页面将 会缩小少于 100% 并且能够显示其他内容， 例如空白空间、 页面背景。
31、颜色、 背景幕图像等等。 视觉视口 306 可以在布局视口 304 之内调整大小。这是为了适应缩放功能以及其他功能。 在包括那些具有覆盖式用户界面元素的实例在内的具体实例中， 可以调整视觉视口 306 的 大小以便保持刚刚在上面描述的属性。如上面所提到的， 相对于布局视口 304 布置元素， 并 且当在视觉视口 306 之内时关于视觉视口 304 呈现元素。 0058 当用户与视觉视口 306 交互时， 关于相对于布局视口 304 已布置的那些元素的位 置关系保持完好。此外， 基于与视觉视口 306 的用户交互， 布局视口 304 是可移动的。考虑 到下面的描述， 这些原则和属性将变得更加清楚。
32、。 0059 参考图 4， 用户在由视觉视口 306 示出的内容上进行放大， 该视觉视口 306 现在完 全出现在布局视口 304 之内。因此， 当用户放大时， 视觉视口变得更小并且其内部的内容被 放大。在所示出的和所描述的实施例中， 该缩放被实现为光学缩放。在光学缩放中， 放大内 容而没有改变页面的布局。出现在页面上的项目只是被放大。因为用户看见的是视觉视 口 306 之内出现的内容， 因此固定位置元素 308 不再是可见的。但是， 固定位置元素 308 相 对于布局视口 304 保持位置上的固定。在该特定示例中， 因为用户并没有关于位于布局视 口之外的内容向上滚动或向下滚动， 因此没有激发。
33、滚动事件并且也没有改变滚动偏移。正 如本领域技术人员所理解的那样， 当激发滚动事件时， 可能会发生对于脚本引擎的回调， 这 允许脚本引擎更新 DOM， 从而使得已更新的 DOM 可以被用于重新布置内容， 以便建立可以由 web 浏览器呈现的更新的显示树。 0060 参考图 5， 已经按照箭头的方向将视觉视口 306 摇动到右底部， 以便看见固定位置 元素 308 的一部分。再次， 在该特定示例中， 因为用户并没有关于位于布局视口之外的内容 向上滚动或向下滚动， 因此没有激发滚动事件并且也没有改变滚动偏移。 0061 参考图6， 已经按照箭头的方向将视觉视口306摇动到固定位置元素308的左侧并。
34、 且下降至布局视口 304 的底边缘。固定位置元素 308 现在是不可见的。在这点上， 因为用 户并没有关于位于布局视口之外的内容向上滚动或向下滚动， 因此没有激发滚动事件并且 也没有改变滚动偏移。 0062 参考图 7， 已经按照箭头的方向将视觉视口 306 向下移动。在一个或多个实施例 中， 因为视觉视口306被配置为不延伸到布局视口304之外， 因此在其他情况下会导致视觉 视口306跨越布局视口304的底部边界的按照该方向的移动， 作为替代地导致布局视口304 说 明 书 CN 102929497 A 8 7/10 页 9 随着视觉视口一起被移动或拖动。当这种情况发生时， 滚动事件被激发。
35、并且滚动偏移被更 新。通过激发滚动事件的再调用， 可以更新 DOM， 这又可以被用于建立可呈现的显示树以便 呈现用户看见的内容。此外， 相对于布局视口 304 更新固定位置元件 308 的位置。再次， 通 过更新到 DOM 发生这种情况。 0063 参考图 8， 按照箭头的方向将视觉视口 306 向上摇动到右侧， 从而使得固定位置元 素 308 的一部分得以示出。在该实例中， 没有激发滚动事件并且没有改变滚动偏移。 0064 参考图 9， 已经按照箭头的方向将视觉视口 306 向左侧和向上摇动， 从而使得视觉 视口 306 的顶部与布局视口 304 的顶部是同延的。在该示例中， 没有激发滚动事。
36、件并且没 有改变滚动偏移。现在假设， 用户继续向上移动视觉视口 306。作为一个示例， 考虑图 10。 0065 在那里， 用户已经按照箭头的方向将视觉视口 306 向上移动。作为结果， 因为视觉 视口 306 被配置为不延伸到布局视口 304 之外， 因此布局视口 304 随着视觉视口 306 一起 被移动或拖动。因为视觉视口 306 已经向上滚动通过内容， 因此激发滚动事件并且更新滚 动偏移。此外， 相对于布局视口 304 更新固定位置元素 308 的位置。再次， 通过更新到 DOM 发生这种情况。 0066 参考图11， 视觉视口306被缩小以便再次与布局视口304同延。 这样， 固定位。
37、置元 素 308 现在是可见的。 0067 如上所述， 在一个或多个实施例中， 可以独立地修改视口。举例来说， 可以修改视 觉视口的大小以便适应诸如屏幕上触摸键盘之类的覆盖式用户界面以及诸如 “在页面上寻 找” 机制等的其他覆盖式用户界面。此外， 可以将通知实现为覆盖式用户界面， 其中视觉 视口被修改以便适应该通知或多个通知。这可以启动固定元素内的附加情景 （比如触摸输 入） ， 并且当键盘可见时摇动 / 缩放固定元素。作为一个示例， 考虑图 12。 0068 在那里， 显示出屏幕上触摸键盘。在该特定示例中， 为了适应键盘的显示， 已经调 整视觉视口 306 的大小使其粗略地是布局视口 304。
38、 的一半。如在下面将变得显而易见的， 通过这样做， 允许在显示键盘的同时摇动到文件的全部区域。 注意在该示例中， 当调整视觉 视口 306 的大小时， 布局视口 304 保持不变。使用这种方法， 消除键盘将不会使得视觉区域 置于 100% 缩放矩形之外。在该特定示例中， 键盘的显示并不导致滚动或摇动。 0069 参考图13， 来自图12的键盘已经消除。 注意到， 对消除键盘做出响应， 已经调整视 觉视口 306 的大小以便与布局视口 304 同延。这个情况与图 3 中所示出的在初始缩放操作 之前的情况实际上相同。在该示例中， 没有激发滚动事件并且也没有更新滚动偏移。 0070 参考图 14， 。
39、按照与上面描述的类似方式来缩放视觉视口 306。注意到固定位置元 素 308 看不见。没有激发滚动事件并且也没有更新滚动偏移。 0071 参考图15， 显示出键盘， 而这又调整了视觉视口306的大小。 没有激发滚动事件并 且也没有更新滚动偏移。 0072 参考图 16， 已经消除键盘并且将视觉视口 306 的大小调整到其原始缩放的大小。 没有激发滚动事件并且也没有更新滚动偏移。 0073 参考图17， 再次显示键盘， 而这又调整了视觉视口306的大小。 没有激发滚动事件 并且也没有更新滚动偏移。 0074 参考图18， 已经将视觉视口306向下移动， 从而使得视觉视口306的底部与布局视 口 。
40、304 的底部同延。在这里， 因为视觉视口 306 还没有被移动到在其他情况下会截去或延 说 明 书 CN 102929497 A 9 8/10 页 10 伸到布局视口 304 之外的位置， 因此没有激发滚动事件并且也没有更新滚动偏移。 0075 参考图 19， 已经将视觉视口 306 移动到右侧从而使得固定位置元素 308 出现。注 意， 在该示例中， 键盘可以被利用来将文本输入到固定位置元素 308 中。现在， 为什么在至 少一些实施例中调整视觉视口 306 的大小是合乎期望的这一点变得显而易见。考虑到其中 没有调整视觉视口 306 的大小以便适应键盘的情况。在该特定实例中， 如果未调整大。
41、小的 视觉视口被移动到相对于布局视口在固定位置元素 308 之上的位置， 则键盘会遮挡固定位 置元素 308， 并因此用户不能够将文本输入到固定位置元素中。因而， 在比如这些和其他的 一些实例中， 调整视觉视口的大小使得用户能够重新定位视觉视口 306 以便使得固定位置 元素 308 可见， 并且利用诸如键盘之类的覆盖式用户界面与固定位置元素 308 进行有意义 的交互。 0076 参考图20， 图19的键盘已经被消除并且视觉视口306已经被摇动到左侧并且向下 移动， 因此随着视觉视口 306 一起移动或拖动布局视口 304。因而， 激发了滚动事件并且更 新了滚动偏移。 0077 在考虑了根据。
42、一个或多个实施例的布局视口和视觉视口的各个示例以及它们的 互动之后， 现在考虑下面的示例性方法。 0078 示例性方法 图 21 是描述了根据一个或多个实施例的方法中的步骤的流程图。该方法可以连同任 何合适的硬件、 软件、 固件或其组合来施行。在至少一些实施例中， 该方法可以通过具体实 施在某些类型的计算机可读存储介质上的软件来施行， 例如 web 浏览器之类的应用或其他 应用。 0079 步骤 2100 利用布局视口来布置用于呈现的内容。可以利用任何合适类型的布局 视口， 在上面提供了其示例。步骤 2102 利用视觉视口， 在视觉视口之内内容对于用户来说 是可见的。可以利用任何合适的视觉视口。
43、， 在上面提供了其示例。步骤 2104 启动了视觉视 口与布局视口之间的交互。在上面提供了交互的示例。在所示出的和所描述的实施例中， 视觉视口与布局视口分开并且相对于布局视口自由地操纵视觉视口。举例来说， 可以在布 局视口之内放大和缩小视觉视口。另外的交互可以包括经由视觉视口的交互， 其导致相对 于布局视口施行动作。 举例来说， 相对于视觉视口的动作可以导致激发滚动事件， 而这又导 致布局视口改变。 举例来说， 基于用户与视觉视口的交互， 布局视口可以随着视觉视口一起 移动或拖动， 正如上面所描述的。 0080 此外， 视觉视口与布局视口之间的交互会影响或者以其他方式包括固定位置元素 或固定位。
44、置背景， 正如上面所描述的。举例来说， 当例如视觉视口使得布局视口移动时， 这 种交互能够导致固定位置元素随着布局视口一起重新定位。 0081 图 22 是描述了根据一个或多个实施例的方法中的步骤的流程图。该方法可以连 同任何合适的硬件、 软件、 固件或其组合来施行。在至少一些实施例中， 该方法可以通过具 体实施在某些类型的计算机可读存储介质上的软件来施行， 例如 web 浏览器之类的应用或 其他应用。 0082 步骤 2200 利用布局视口来布置用于呈现的内容。可以利用任何合适类型的布局 视口， 在上面提供了其示例。步骤 2202 利用视觉视口， 在视觉视口之内内容对于用户来说 是可见的。可。
45、以利用任何合适的视觉视口， 在上面提供了其示例。步骤 2204 修改了视觉视 说 明 书 CN 102929497 A 10 9/10 页 11 口的大小以便适应覆盖式用户界面。 可以利用任何合适类型的覆盖式用户界面。 举例来说， 在至少一些实施例中， 可以利用屏幕上的触摸键盘的形式的覆盖式用户界面。 但是， 应当认 识到并且理解的是， 在不背离要求保护的主题的精神和范围的情况下， 可以利用其他的覆 盖式用户界面。 0083 在描述了根据一个或多个实施例的示例性方法之后， 现在考虑讨论可以用来实施 在上面描述的实施例的示例性设备。 0084 示例性设备 图 23 示出了示例性设备 2300 的。
46、各部件， 该示例性设备 2300 可以被实现为如参考图 1 和 2 所描述的任何类型的便携式设备和 / 或计算机设备， 以便实施在此所描述的实施例。 设备 2300 包括通信设备 2302， 其使得能够进行设备数据 2304（例如， 接收到的数据、 正被 接收的数据、 为广播预定的数据、 数据的数据包等） 的有线和 / 或无线通信。设备数据 2304 或其他设备内容可以包括设备的配置设定、 存储在设备上的媒体内容和 / 或与设备的用户 相关联的信息。存储在设备 2300 上的媒体内容可以包括任何类型的音频数据、 视频数据和 / 或图像数据。设备 2300 包括一个或多个数据输入 2306， 经。
47、由该数据输入可以接收任何类 型的数据、 媒体内容和 / 或输入， 比如用户可选择的输入、 消息、 音乐、 电视媒体内容、 记录 的视频内容、 以及从任何内容和 / 或数据源接收的任何其他类型的音频数据、 视频数据和 / 或图像数据。 0085 设备2300还包括通信接口2308， 其可以被实现为串行和/或并行接口、 无线接口、 任何类型的网络接口、 调制解调器中的任何一个或多个， 并且被实现为任何其他类型的通 信接口。通信接口 2308 提供设备 2300 与通信网络之间的连接和 / 或通信链路， 其他电子 设备、 计算设备和通信设备通过该通信接口与设备 2300 传送数据。 0086 设备 。
48、2300 包括一个或多个处理器 2310 （例如微处理器、 控制器等中的任何一种） ， 其处理各种计算机可执行或可读的指令， 以便控制设备 2300 的操作并且实施上面所描述 的实施例。可替换地或附加地， 可以利用硬件、 固件或连同一般标识在 2312 处的处理和控 制电路一起实现的固定逻辑电路中的任何一种或组合来实现设备 2300。尽管未示出， 设备 2300 可以包括系统总线或数据传送系统， 其耦合设备内的各种部件。系统总线可以包括不 同总线结构中的任何一种或组合， 比如存储器总线或存储器控制器、 外围总线、 通用串行总 线和 / 或利用各种总线体系结构中的任何一种的处理器或局域总线。 0。
49、087 设备 2300 还包括计算机可读介质 2314， 比如一个或多个存储器部件， 其示例包括 随机存取存储器 （RAM） 、 非易失性存储器 （例如只读存储器 （ROM） 、 闪存、 EPROM、 EEPROM 等中 的任何一种或多种） 、 以及盘存储设备。盘存储设备可以被实现为任何类型的磁或光存储设 备， 比如硬盘驱动、 可记录和/或可重写的紧致盘 （CD） 、 任何类型的数字通用盘 （DVD） 等。 设 备 2300 还可以包括大容量存储介质设备 2316。 0088 计算机可读介质 2314 提供数据存储机制， 以便存储设备数据 2304 以及各种设备 应用 2318 和任何其他类型的信息和 / 或与设备 2300 的操作方面相关的数据。举例来说， 操作系统 2320 可以利用计算机可读介质 2314 保持为计算机应用并且在处理器 2310 上执 行。设备应用 2318 可以包括设备管理器 （例如， 控制应用、 软件应用、 信。