4、小工具核心设计全解析

小工具核心设计全解析

1. 移动设备适配与小工具尺寸

在移动设备上，移动 API 供应商建议应用采用“全屏”模式，让内容填满整个设备屏幕，这样能呈现出与原生智能手机应用相同的外观，实现更一体化的展示，此时物理设备会提供界面框架。

小工具设计中，小尺寸是最基本的要素之一，确保小工具能适配小容器很关键。不过，不同平台对尺寸的要求各异，具体如下：
|平台|宽度要求|高度要求|
| ---- | ---- | ---- |
|Gmail|固定宽度 160 像素|可变|
|Vista 侧边栏|固定宽度 130 像素|可变|
|iGoogle|宽度取决于浏览器窗口大小|可变|
|Opera|宽度和高度均可变|可变|
|手机屏幕|固定宽度和高度|固定|

设计能在任何尺寸下运行的小工具并非易事，需要根据 130 像素及以上的不同宽度，动态、智能地重新排列内容。在需要自己提供界面框架的平台上，工作会更复杂，因为小工具周围的框架也需具备适应性。但这种方式能打造出最专业的小工具。

另一种极端做法是，将小工具专门设计为在最小目标平台上运行，在其他系统上会出现空白区域，可使用背景颜色或图像填充。这种方法最简单，但在较大平台上的外观可能不尽如人意。

折中的办法是支持几种离散的固定尺寸，并在代码中进行选择。例如，小工具可以有 130 像素宽的“小”模式和 250 像素宽的“大”模式，这种方案能在大多数平台上呈现合理外观，且无需复杂的动态尺寸调整。

对于高度，多数平台较为灵活，通常无需过多担忧。作为开发者，要确保小工具内容填满容器，即使内容宽度固定，也要保证背景颜色或图像覆盖整个小工