加载中…
BAE团队：在不同分辨率手机开发Widget应用的方法
(2010-08-06 15:36:14)
标签：
widgetjilsdk分辨率开发杂谈 |
独家供稿：移动Labs
1. 简介
如果Widget没有考虑到不同分辨率，很可能看上去像下图一样：
http://labs.chinamobile.com/upload/my_blog/20/38/10/9_9450713994c5a4f2403297.PNG
Widget不会使用全屏，字体太小无法轻松阅读，而且由于导航在触摸屏上形状过小使其无法使用。
这篇文档将讲解如何处理使用沃达丰应用程序管理器（Vodafone Apps Manager）的移动设备的各种不同屏幕尺寸和PPI值，此管理器是事实上启动、显示和控制Widget的运行时环境。与此文档的先前版本对照，我们扩展了有关PPI的章节，并且增加了Widget上不同分辨率和效果的章节，介绍了通用的技术并举了详尽的例子。
我们以“分辨率”这个名词的介绍和创建可伸缩Widget的不同技术的讨论开始。下一章以Widget开发者为视角，内容覆盖了屏幕尺寸和Widget大小的知识。后续章节给出了移动设备不同分辨率的深入讨论，如它们如何影响Widget，开发者处理它们存在哪些可能性。接着是展示如何使用我们所阐述技术的详尽的例子，并以此结束。
1.1
术语
术语“分辨率”具有不同的含义，这依赖于如何使用它。理解这些区别以及“分辨率”在此文档中的含义特别重要。
“屏幕分辨率（screen resolution）”定义为在横向和纵向范围内显示的像素数目。屏幕分辨率一般如下给出：
“水平像素数x垂直像素数”，例如800x600
常见的屏幕分辨率有特定的名字，如SVGA代表800x600。下图给出了如今使用的常见屏幕分辨率的概况（不局限于移动设备，参见附录A）：
http://labs.chinamobile.com/upload/my_blog/20/38/10/9_19571454924c5a4f487b970.PNG
常见屏幕分辨率。（许可证：Creative Commons Attribution-ShareAlike3.0，来源: http://en.wikipedia.org/wiki/Display_resolution）
屏幕分辨率只是以像素的形式定义的，并没有定义显示区域的物理大小（以毫米或英寸等长度单位表示，你可以以自己的标尺测量设备）。硬件制造商会实现不同尺寸屏幕上的相同屏幕分辨率，例如2英寸或2.6英尺的直径的屏幕都可使用240x320的屏幕分辨率。这导致了不同显示屏的不同像素密度，这使用术语PPI（pixels per inch）来表示。PPI也被称为显示的“分辨率”，这就是我们在此文档中所称的分辨率。
在我们的例子中，拥有240x320像素和2英尺屏幕具有196PPI，然而2.6英尺屏幕仅有153PPI。计算方式参见3.1节。
1.2
创建可伸缩/分辨率自适应Widget的哲学
此文档中我们将展示一些特定技术，这些技术能被用来创建可伸缩的Widget。可伸缩在此文中是什么意思呢？
可伸缩意为Widget自适应于设备特征以在设备上给用户最好的体验。所要使用的设备详细特征的精确性很大程度上取决于Widget用例，并且取决于设计者想让Widget运行在不同的平台上的程度。
在一个Widget中处理不同分辨率的方法对另一个Widget或用例来说可能是错误的。例如：假定你有一个RSS阅读器Widget和一个游戏Widget。为了显示尽量多的内容，你很可能希望RSS阅读器占用移动设备的整个屏幕。但是游戏Widget需要特定的纵横比例（如方形）。使用第二章介绍的技术调整Widget为全屏，对RSS阅读器来说是完美的，但对于游戏Widget来说不合适。
另外，创建可伸缩Widget有两条一般哲理。你可以创建一个根据设备特征，或平滑缩放或特定几步的修改的可伸缩Widget。我们称前者(seamlessly scales 平滑缩放，无修改)为线性（linear），后者为基于属性（profile based）的，依赖于用例确定采取哪种方式。
在我们上述的例子中，RSS阅读器是线性可伸缩的不错的候选者，例如，不顾设备的PPI而统一标识字体显示为2毫米大小。
对于游戏Widget使用两组图形可能会更好：一组低分辨率图形，另一组高分辨率图形。此外，两种字体大小（12px和16px）可定义用来与两组图形结合使用。如果分辨率比已定义的值高，如200PPI，你需要使用高分辨率图片和16px大小的字体，否则你需要另一组图片和12px大小的字体。若使用这种方式，你应为你的Widget创建两组属性。你可以扩充，如包含150PPI提供3组图片与字体大小，这样产生了3个配置文件：0-150,150-200和大于200 PPI。
实际上，你会发现有些用例混合使用了线性的和基于属性的方法。例如，你可能需要字体符合线性策略而Widget菜单等采用基于属性的方法。
请注意，你将看到起初可能会让你感觉奇怪的一些技术，如以毫米而不是像素定义字体大小。感觉奇怪可能是源于作为开发者的我们多年来都是以像素定义字体大小的，我们知道它的作用并且这也是我们喜欢使用的。为现在拥有不同屏幕尺寸和不同屏幕分辨率的移动设备（它们的屏幕尺寸有限，而且分辨率与PC的差异很大）编写应用程序需要其他的方式。
2
屏幕尺寸与Widget大小
当移动微技开发者想要他们的Widget在每个手机上都能看上去很好的时候，他们将面临很多问题。问题之一是Widget自身在屏幕上的大小。Widget的大小是通过其config.xml指定的。假定我们定义了Widget的宽和高位240x320像素。现在此Widget在Nokia
N95(240x320像素，约154ppi)会全屏显示，但是仅会占用Nokia 5800
XpressMusic(360x640像素，约229ppi)的1/3屏幕。
幸运的是，config.xml中定义的高度和宽度仅用来初始化Widget，可在运行时由程序改变。为了确保你的Widget总是全屏运行，你可以使用下述简单的JavaScript函数。
function resizeWidget() {
var availWidth = screen.availWidth;
var availHeight = screen.availHeight;
window.resizeTo(availWidth, availHeight);
}
在Widget的运行过程中，手机的分辨率是可以改变的。例如，较新的手机都有手机水平或垂直的传感器。Vodafone 应用程序管理器（Vodafone Apps Manager）会感知这些改变并当改变时触发resolution事件。为确保每次分辨率改变时你的Widget都会重新计算大小，你可以为resolution事件添加事件监听器并使用resizeWidget()函数作为事件处理器：
widget.addEventListener('resolution', resizeWidget, false);
另外，当Widget启动时你应该调用resizeWidget()函数，因为用户可能会以landscape模式启动Widget。此时运行时环境不会产生resolution事件，这样你必须手动调用resizeWidget()函数。
再有，你应该检测你的Widget是否运行在桌面上。若在桌面上，不想重绘Widget为全屏，就不需要调用resizeWidget()函数。为确保Widget只有不在桌面上时才被重绘大小，应该在代码中增加如下代码：
3.
分辨率（PPI）
屏幕是由水平和垂直对齐的像素组成的。屏幕的分辨率是以PPI（pixels per
inch）给出的，它的基本含义是每英寸的像素数。在高PPI设备上，以像素定义大小的显示部件（如100x100像素）会比低分辨率设备上看上去小。
3.1.
理论计算PPI
注意：为在Widget中应用PPI值，你不需要知道手机上计算PPI的公式。此章节是纯信息性的，如果你不对怎样计算手机的PPI的技术感兴趣，你可以跳过此章节。
计算设备的PPI是很简单的，可以在两步内完成：首先，以像素来计算对角分辨率；接着，将上一步的结果除以屏幕的对角英尺数。(http://en.wikipedia.org/wiki/Pixels_per_inch)
一个例子：Nokia N95具有2.6的QVGA屏，拥有240x320像素。
w =
h = 高度像素数
dp =
di =
第一步，计算对角像素数：
第二步，将第一步的结果除以屏幕对角英寸数：
我们得出Nokia N95每英寸约有154像素。
一般，Symbian S60 v3的所有手机都是240x320像素；Symbian S60 v5的所有手机都是640x360像素。
3.2. 理论和实际的不同—物理和逻辑英寸
不幸的是，我们无法使用前述段落所提到的公式。这完全由于：作为一个开发者，我们没有获取显示屏物理尺寸的通用方法。
幸运的是，Widget运行时允许通过英寸为单位定义部件的高度和宽度。它是怎么工作的呢？基本上是采用假定和近似值：系统定义了许多它所认为的显示屏一英寸显示像素数（这里所说的英寸为逻辑英寸）。逻辑英寸和物理英寸的不同正式有趣的部分。如果我们拿一般的PC为例，PPI默认被设置为96 。这主要是由于显示器可替换，这些显示器可以拥有操作系统未设置的物理PPI。因此，操作系统仅做此假定，这将导致屏幕上实际显示英寸大小的极大不同。
由于移动设备拥有固定的屏幕，这使得运行时环境定义最适合屏幕实际英寸的固定PPI值成为可能。在不同的移动平台上测试，结果显示了逻辑和物理英寸很好的相符，其不同可以忽略。这意味着，作为一个开发者我们可以定义，例如元素拥有1英寸边缘长度，并且可以确保在每个移动设备上它总有1英寸高和1英寸宽。
对此方面的深度阅读有时很难把握，我们推荐www.emdpi.com。
3.3.
实际计算PPI
如3.2所提到的，Widget运行时允许你创建以英寸定义的元素。下述JavaScript函数创建一个1逻辑英寸宽的元素并且读取Widget运行时创建元素所采用的像素数。
通过此函数，你可以容易的得到目前设备的PPI并在JavaScript中按所需处理它。
3.4.
Widget不同分辨率的效果
不同硬件平台屏幕一英寸能显示的像素数变化很大，这一事实使得开发者很难创建在任意平台上都有最佳显示的Widget。例如，以像素定义尺寸的一个Widget在桌面上（约96PPI）看上去很好，当在3.5寸屏640x360像素（约210PPI）手机上显示时会看上去很小。
下一节我们将看看Widget可包含的不同视图元素以及它们如何受不同分辨率的影响。
3.4.1.
固定大小的元素和图片
一般来说，Widget提供了一些像菜单按钮、不同样式和位置的文本区域等一般的布局元素。如本章简介所述，以像素定义尺寸的元素在高分辨率的显示屏上会看上去很小。
使Widget在不同手机上拥有最佳外观，对移动微技开发者来说，难度的另一问题关系到Widget所用的图片。网页中使用图片最广泛流传的方法是包含位图，如 .jpg，.png，.gif等等。遗憾的是，由于手机PPI的变化极大，同时使用移动微技，这种情况就更复杂了一些。在Nokia N95（QVGA，240x320像素，约154PPI）上显示很好的图片将在Nokia N97（360x640像素，约210PPI）上显示过小。而在Nokia N97上显示完美的图片可能会在Nokia N95上显示失真。这是由于位图图片不是可伸缩的。你可以调整他们的大小，但是这通常会产生模糊的图片而且很可能会变得不可接受。
3.4.2.
文本内容
这不仅作用于以像素定义大小的布局元素，同时也作用于以像素定义字体大小的字体。与低分辨率的显示屏相比，高分辨率显示屏上的字体看着更小。现在的显示屏提供了很高的分辨率，这使得如12像素（这在网页中是常见的）大小的字体很难阅读。
经常出现的一个问题：字体什么时候可读？可惜现在没有准则。即使是在传统的印刷媒体行业，这个问题也受许多主观因素影响，例如读者的年龄。然而还是有些规则可翻阅的：如果字符比2毫米或0.07英寸大，那么它是可读的。
3.4.3.
触控元素
由于现在手机以触摸屏做为唯一的导航方式，另一个问题出现了：在高分辨率的设备上，手触元素太小以至于无法舒适的点击。像字体大小一样，这也会引起相似的问题：多大的区域才可手触？这再次牵扯到许多因素，像手指的厚度、触摸板的物理特性，这使得此问题很难有通用的答案。但还是有些规则可共参考的：边缘长度大于7毫米或0.27英寸的方形区域是可触控的。
3.5.
处理不同PPI的一般技术
Widget开发者可使用不同的技术处理PPI。下述章节讲述了一些作为Widget开发者可使用的处理不同PPI的一般技术。知道什么时候使用哪种技术是特别重要的，更重要的是要清楚什么时候不适用他们。
3.5.1. CSS—相对长度单位和百分比
用例：
l
l
W3C CSS 2.1 规范(http://www.w3.org/TR/CSS2/)在相对和绝对长度单位之间做了区别。此节讲述相对长度单位em，下节介绍绝对长度单位。
“相对”意为通过相对大小计算大小。em单位如下定义：em单位与元素所使用的font-size属性的计算值相等，所以em单位用字体大小作为参考大小。
例如，你想创建一个通知框。此通知框高度应该是font-size的三倍而且信息应居中显示。简单书写的HTML如下：
body的字体大小为12px，这将被用作参照。对于通知框，我们定义span元素高度为字体大小（12px），使用字体大小作为填充(padding)，这样上部和下部共有两倍的字体大小（24px），高度总和为36px。附加的1px宽的红边框使它看起来更好。
改变body中字体大小将导致不同大小的通知框。把通知框包含进另一个已定义字体大小的元素，所参考的font-size将变为外层元素的字体大小。
另外定义相对大小的方式是使用percentage值。你或许希望通知框有半屏幕宽而且居中显示。更进一步，字体大小应该是正常大小的两倍。我们通过下述增强CSS声明：
width属性参照父对象（body标签，在我们例子中为整个Widget的宽度）的宽度并且使通知框的宽度为它的一半。为了使其居中，我们通过定义左边距25%来调整通知框。这样，我们获得了25%左侧和右侧空闲空间，通知框精确的占用了整个宽度的50%。
字体大小属性的percentage参照定义在父对象（body）中的字体大小。200%双倍，致使字体大小为24px。先前定义的em值现在参照此值来计算，所以总高度为72px（加上边框）的通知框。
此例子说明了当使用百分比时，得知用来计算时所参考的大小特别重要。使用em或percentage值可以让你创建动态适应给定值的Widget，这种可伸缩为线性（linear）。此主题的更多内容，参见http://www.w3.org/TR/CSS2/。
扩展：像素作为相对单位
如上所述，CSS规范在相对和绝对单位之间做了区分。在规范中px单位被归类为相对单位。乍一看，可能感觉奇怪。但是易于解释：以像素定义的尺寸是相对于设备分辨率的。
3.5.2. CSS—绝对长度单位
用例
l
l
非用例：
l
l
l
l
如3.2所述，Widget运行时允许你以英寸定义元素尺寸，定义是通过CSS定义的。例如：
下面我们仔细查看Widget运行时如何解释和绘制这个例子的。首先，Widget运行时查看格式定义中指定的单位，在我们的例子中为英寸。接着，Widget运行时将此值与PPI（预定的）相乘等到像素形式的长度，然后绘制。在不同分辨率屏幕上当然会得到不同数目的像素数目。
如果字体大小或图片也以英寸定义，也是一样的过程，单位换算成像素数然后绘制。例如：
此定义一个典型的用例是股票新闻连续文本的Widget，你可以确保在各种分辨率上的字体大小，可伸缩形式为线性（linear）。
除了英寸，CSS允许通过下述绝对单位定义尺寸：
l
l
l
l
3.5.3. CSS媒体查询
用例：
l
l
媒体查询（Media queries）是让你的Widget适应设备/媒体特征的一项强大机制。一般来说，媒体查询提供了很多功能，但我们这里将聚焦于其PPI的使用。以一个例子开始：
在此例中，我们为PPI至少为200的设备定义body标签的字体大小为24px。当解析CSS定义时，Widget运行时使用媒体查询给定的DPI（这里DPI和PPI等价）值与预置的PPI值对照。只有设备的分辨率至少为200PPI，大括号中定义的样式才会被应用。
你可以将任意的CSS定义封装成类似的媒体查询，不限于在我们例子中提到的像素单位。你也可以使用3.5.2中所说的英寸和厘米单位。在3.6.2中，你将看到怎样使用媒体查询管理字体大小的扩展例子。
使用媒体查询有一项有趣的方式。除了直接在大括号中定义媒体具体规则，你还可以将他们放到单独的文件中然后使用媒体查询将文件导入。例如：
为了测试，你可以直接包含不同样式定义并且观察他们怎样影响你的布局。
使用媒体查询，可为不同范围的PPI值定义样式，所以这种比例(scaling)为基于配置文件的(profile based)。媒体查询更多知识，我们推荐http://www.w3.org/TR/css3-mediaqueries/。
3.5.4. JavaScript
用例：
l
在3.3中，我们展示了怎样使用JavaScript计算PPI。作为一个开发者，我们可以使用JavaScript访问DOM和操纵它的元素。可以推断，我们也可以根据PPI操纵DOM。下面我们改写3.5.3中的例子：
即使这个不言自明的例子也做到了通过媒体查询做到的相同的事，除了处置元素样式JavaScript可以做更多的事。例如，根据PPI我们可以绘制不同文本或将元素打乱顺序—这些事用CSS是无法做到的。
var ppi = getPPIOfCurrentDevice(); // defined earlier
var DOM_body = document.getElementsByTagName_r('body')[0];
DOM_body.innerHTML = 'Your device has PPI value of '+ppi;
使用JavaScript，我们可以运用自己喜欢的PPI值，因此我们可以实现线性缩放同时是基于配置文件的。
3.6.
字体大小具体技术
Vodafone应用程序管理器的对Widget的index.html文件body标签默认字体大小为16像素。像所有其他的HTML/CSS环境，开发者可以通过变换body
CSS的font-size属性改变默认字体大小。我们将讲述怎样改变上述并且讲述怎样定义它的相对值，这对头条新闻等时有用的。
3.6.1. CSS字体特征关键字
CSS中有7个固定关键字来操控字体大小：xx-small，x-small，small，medium，large，x-large和xx-large。7个关键字以medium关键字函数作为参照的。其他的字体大小是从medium字体大小或增大或缩小衍生而来的。medium字体本身大小是从用户浏览器设置得到的。它可以通过开发者运用CSS设置body标签来改变。
截图1显示了沃达丰程序管理器中最小的字体大小为11像素。Widget中和桌面（桌面使用Oprea浏览器，如截图2）字体大小比较，xx-samll使用11像素绘制（桌面：9像素），x-samll同样使用11像素绘制（桌面：10像素）。
http://labs.chinamobile.com/upload/my_blog/0b/27/07/2_6846660464c5a4fb455185.PNG
一般而言，可以使用CSS关键字管理字体大小。然而，运行时解释关键字的差异我们可能不清楚。可能会存在特定关键字不被运行时环境识别或得到不同处理的情况，就像上两幅截图一样，xx-small和x-small关键字处理方式不同。
3.6.2.
媒体查询处理字体大小
开发者可使用媒体查询确定当前正在运行设备的分辨率。根据分辨率，开发者创建任意数量的布局配置文件，在这些配置文件中字体大小被定义成固定的像素值。通过这种途径，开发者可以确定字体大小合适。
一个更高级的方法是运用媒体查询确定正在运行设备的分辨率，但与前述方法对比，开发者无需定义所有字体大小的像素数，只需定义body标签的font-size。然后其他的字体大小就可定义成相对值—如百分比(%)，em值或在前述章节定义提到的关键词。body标签的字体大小为所有其他字体大小作为参照。
下面是一个例子：
对于这小段HTML，我们可以采用下述CSS定义为不同设备处理字体大小：
第一种方法的主要优点是可维护，当有新的设备和/或其他分辨率的设备出现时，开发者仅需增加另一种媒体查询并且替换body标签的字体大小。其他字体大小将会自动替换，当然是以body标签的字体大小作为参考的。这就使得开发者通过最少的修改调整他们的Widget。
3.7.
图形/图片具体技术
与第一次在3.6.2节描述的方法类似，开发者可使用媒体查询确定当前运行设备的分辨率。根据不同的分辨率，开发者使用不同的图形集。通过这种方法，开发者可以确保图片在各个设备上看上去都很漂亮。当然，这种方法需要更多的工作，这是应为开发者必需创建相同图片的不同集合。不用说，维护这样一个Widget需要更多的时间和精力。
怎样省去创建不同图形集的工作？由于运行时环境允许调整图形大小，因此可用媒体查询依据PPI调整图片。第一种方法是重新定义位图图像的大小：
其CSS应该类似于：
当然你也可以使用像素定义图标大小。要记住的一件重要事是，由于位图图片不能无质损的缩放，这可能导致图片模糊或损坏图片。
更好的方法是使用缩放向量图（SVG：Scalable Vector Graphics）。SVG由于重定为开发者想要的任意大小而不会变模糊或遭到其他方式的损坏，成为分辨率无关图像的最好工具。
使用SVG与媒体查询组合会十分简单。首先，开发者使用媒体查询确定当前设备所运行的分辨率；然后SVG可以通过宽度和高度属性重定大小。
下面是个例子：
对于这小段HTML代码，开发者可使用下述CSS定义为不同设备来处理图片大小：
就像控制字体大小一样，这种方法有很大的优势：将来，当有新设备或其他分辨率设备时，开发者仅需增加另一种媒体查询并且替换SVG的宽度和高度属性。
4. 创建比例自适应Widget
前两章讲述了屏幕大小和分辨率怎样影响Widget的感官和触感，并且讲述了在各种平台上使Widget具有最佳感官的现存技术。接下将讲述怎样创建比例自适应Widget。
4.1. 新闻浏览器
假设你要创建运行在各种分辨率触摸设备上的新闻浏览器，框架如下：
http://labs.chinamobile.com/upload/my_blog/0b/27/07/2_10544079264c5a50014b9ac.PNG
截图3：新闻浏览器框架
此布局包含3部分：标题、主体和导航栏。标题可以占据多行并应使用比主体大的字符显示。在标题和主体之间使用一条细线来分隔，主体应使用容易阅读的字体大小。用户使用导航按钮来导航到前一页或下一页新闻。
4.1.1.
首次实现
我们看一下类似这样程序的基本HTML和CSS的重要部分。
非常直观，在body里面创建了3个div元素，增加了示例的文本内容并为导航使用了链接标签。
基本内容：我们在html/body中设置了Widget的字体族和背景色。同时删除了html或body设置的页边空白，因此整个空间都用于我们的Widget。
标题：字体大小是用毫米定义的，这里我们没有使用像素，因此可以确保即使在不同分辨率显示屏上标题也以相同的大小显示。我们将字体设置为粗体，用相对单位em增加了填充同时增加了边框。边框使用像素定义的，这样也可以做到尽量美观。我们并没有定义高度，这样元素可以扩展高度，这对拥有多行的标题是有利的。
主体：字体是用毫米定义的，像标题中没有定义高度一样，这里也没有定义高度。像标题一样，填充也是用em定义的，按钮填充是个例外。我们需要确保按钮有足够的空间导航，因此使用相同的填充作为导航的高度。
导航：我们通常将导航放到底部，同时需要它有7mm高以便在任何分辨率上都可触控。对于字体大小来说，使用像素会导致不同分辨率手机上的字体大小不一致。
按钮也有简单的样式：我们希望他们每个都占有Widget宽度的一半，因此使用50%。高度为100%，像父对象中news_navigation元素一样为7毫米。我们让按钮靠左放置以使他们紧靠，设置背景色并使包含的文本居中。
看一下现在的效果：
http://labs.chinamobile.com/upload/my_blog/0b/27/07/2_12178087184c5a501eddb86.PNG
截图4：新闻浏览器，首次实现
现在看起来表现良好，下面我们看一下config.xml文件：
我们以像素的形式定义了Widget的高度和尺寸，看一下它在大屏幕设备上是如何显示的：
http://labs.chinamobile.com/upload/my_blog/0b/27/07/2_8511828914c5a507477450.PNG截图5：新闻浏览器，首次实现在大屏幕上的显示
还记得第二章Widget的config.xml定义高度和宽度在运行时刻改变。下面我们增加启动时重定Widget全屏并改变位置的JavaScript：
我们需要注册init方法，让它在文档加载时被调用：
下面是此Widget在不同屏幕大小和分辨率上的对比：
http://labs.chinamobile.com/upload/my_blog/09/87/d1/1_10538940854c5a508cb0df8.PNG
截图6：新闻浏览器，在不同屏幕尺寸上的比较
注意下述几条：
l
l
l
l
4.1.2.
使用媒体查询增强
考虑一下下述需求：如果宽度大于5厘米，增加两个按钮可以跳到首页和末页。这两个按钮不是关键功能因为可以由上一页和下一页按钮实现，所以在较小显示屏上隐藏他们是合适的。
首先，应如下扩展HTML：
上述代码也明显易懂，复杂的部分是根据屏幕宽度适配Widget。基本上，我们要做两件事：
l
l
实际上，通过媒体查询非常容易实现。增加下述CSS代码到文件末尾来扩展：
结果：
http://labs.chinamobile.com/upload/my_blog/0b/27/07/2_16557867244c5a50b6c9494.PNG
截图7: 4按钮的新闻浏览器
在小屏幕水平和竖直模式测试此Widget表现的效果更好：
http://labs.chinamobile.com/upload/my_blog/09/87/d1/1_8541505634c5a50e22a5b9.PNG
4.1.3.
使用SVG增强
让它更好看的一个方法是在按钮上显示实箭头。上文中我们只是使用了大于号(>)小于号(<)，下面我们使用图片增强Widget感官。
基于采用了良好定义的固定高度7毫米，我们可以采用gif，jpg或png图片。为了更灵活（或许某天7毫米会变成14毫米），我们直接采用SVG图片。在HTML中，需要将>等替换为SVG对象标签：
对于每一个按钮，我们都有特定的SVG文件。7毫米和14毫米感观如下：
http://labs.chinamobile.com/upload/my_blog/09/87/d1/1_11905379534c5a512c3e9c7.PNG
BAE团队发表在移动Labs网站上的原文：http://labs.chinamobile.com/mblog/387842_61755
BAE团队相关博文推荐：
JIL Widge应用开发速成攻略http://labs.chinamobile.com/mblog/387842_61750
JIL Widget应用开发红宝书
http://labs.chinamobile.com/mblog/387842_61751
喜欢
0
赠金笔