令人烦恼的视窗

昵称535749 2013-03-01

展开全文

时间:2013-03-01 09:19来源:程序员作者:baiyuzhong

　　设备制造商为了让自己的设备拥有更清晰的屏幕，往往选择提高屏幕的像素，但有些时候像素的增加并不能让用户获得良好的阅读体验。本文以苹果公司的移动设备为例，为我们揭示了为什么高像素的屏幕会给用户的阅读带来“烦恼”。

　　每周，都会出现具有各种屏幕尺寸、像素密度和输入类型的新设备。作为开发人员和设计人员，我们都同意按照标准来标记、设计以及编写我们所创建的内容。浏览器制造商也同意支持这些标准并为此设置适当的默认值，因此我们可以实现双赢的结果。

　　开发者和浏览器厂商之间的协议变得比以往任何时候都更加重要。

　　这就是为什么当某个设备或浏览器厂商做出了违背协议的事情时，总是会对大家造成伤害。如果另外一方是极具影响力的公司(比如苹果公司)，那么受到的伤害则会更大。

　　苹果公司最新的平板电脑iPad Mini就陷入了这样一种矛盾的处境：其设备宽度viewport的标记默认值与第一代iPad的值相同(1024×768像素)，但iPad Mini的物理屏幕尺寸却小了40%。这就意味着网页的每一个按钮、图形、链接和文本行在iPad Mini上都显得非常小——即使我们试图让一切显得正常并构建出灵活的多设备体验，也无法改善这种情况。

　　但苹果公司并不是惟一的罪魁祸首。这是从我们开始使用视窗时就一直存在的问题，它不仅与像素有关，还与我们自己的实践有关。让我们回过头来重新审视一遍造成目前困境的真正原因，并且了解一下我们需要怎样做才能走出困境。

　　像素带来的麻烦

　　是的，如今的视窗困境可以一直追溯到像素——那些我们每天都在使用的微小元素。像素带来的第一个挑战是数量。显示屏上的像素越多，可以显示的信息就越多。但由于这些像素都是物理像素，其数量无法改变，因此就有了第二个发挥作用的因素：屏幕的物理尺寸。

　　假设有两台2英寸宽的显示屏(如图1所示)，右侧显示屏的分辨率为640×960，左侧的分辨率为320×480，那么在同样的物理空间中，右侧的屏幕可以容纳的像素数量将是左侧屏幕的四倍，较小的像素尺寸导致内容更少且屏幕更亮，给阅读带来了不小的障碍。

　　这正是Nokia E60出现的情况。2005年，大多数手机显示屏的宽度都是1.25 英寸，这种宽度平均可以容纳176个像素。但E60配备了一个分辨率为352×416的“庞大”显示屏，将两倍数量的像素挤进了类似的空间里。结果就是，手机的屏幕看起来华丽鲜艳，却难以阅读。

　　E60 还引入了一个目前早已为人们所熟悉的问题：用户如何在小型设备上访问“大”网站。诺基亚的解决方案是通过一个新的浏览器——Mini Map。这个浏览器的工作原理类似于今天的智能手机浏览器：首先渲染整个页面，然后将它缩放到适合使用的屏幕大小。叠加在这层渲染上的是一个透明的红色方框，通过设备的按钮可以重新定位该方框，按下按钮则可以放大方框内所显示的内容。

　　进入视窗

　　Mini Map可能是动态视窗(一种构造，旨在通过动态改变可视屏幕区域的大小或比例，从而提高用户体验)的第一批商用者之一，但它还远远不是最后一个。

　　2007年，苹果发布了iPhone，它的体积比E60大很多，但它也面临类似的问题。在一个“巨大的”2英寸显示屏上，使用iPhone访问“真正的网络”意味着要将大页面加载到小设备上。苹果则通过一系列精心打造的改进来解决这一问题。

　　首先创建一个虚拟视窗，这个虚拟视窗与诺基亚为Mini Map设计的视窗类似。当用户浏览桌面网站时，浏览器会首先渲染整个页面(默认画布宽度为960像素)，然后再将此页面缩小，直至适应2英寸的显示屏。这样用户就能够与页面进行交互，并且滚动或放大他们所选择的区域。

　　苹果并没有就此止步，它还开发了一个新的 viewport元标记。不使用该标记的站点将使用默认的980像素的传统网络视窗进行渲染，但使用该标记的开发人员可以为自己的站点声明视窗，包括将宽度设置为十分重要的“device-width值”(该值告诉浏览器“请为此设备屏幕选择一个最适合的宽度”)。

　　很快，其他移动浏览器厂商便开始纷纷追随苹果公司的做法。直到如今，几乎所有移动浏览器都支持 viewport元标记及“device-width值”。这为我们提供了一个公平竞技的机会，这个机会尊重那些为多设备网络修改站点的适配花费大量时间和精力的开发人员，同时那些尚未转型的厂商仍会获得“良好”的默认体验。

　　Mini的问题

　　移动设备和浏览器厂商分配给device-width的值与该设备的物理尺寸直接相关。物理尺寸较小的设备需要较小的device-width值(这会导致内容过多)。若将该值设置得过大，则大部分内容会丢失，用户无法舒适地去阅读。

　　这就是iPad Mini的屏幕让人不敢恭维的原因。它的“device-width值”与普通iPad相同(768像素)，但其物理尺寸却小很多。正因如此，iPad Mini的屏幕上显示的网页尺寸与Google Nexus 7上的相比会小27%(根据设备像素的相对大小来计算)，主要原因就是因为苹果公司决定将该设备的视窗定义为768像素。

　　根据内容大小进行解析

　　根据内容大小进行解析所导致的第一个问题就是文本。在较小的空间中有更多的像素，这意味着，以像素为单位定义的字体看起来会很小。

　　当然，很多人不再使用像素来定义大小——我们使用相对尺寸元素(比如ems)，只是这种方法并不能很好地解决问题。

　　当使用ems时，我们相信浏览器默认缩放级别的基准字体的大小(单位术语为1em或100%)是清晰可读的。

　　但情况并非总是如此，浏览器的基准font-size值 (1em) 大致相当于一个16像素的正方形。该比率作为一条纽带把绝对单位和相对单位联系在了一起，但浏览器的不同可能会带来一些差异。

　　在iPad Mini上，基准字体的大小是16像素。当屏幕容纳较少的像素时可能没有问题，但在视窗定义得不那么适当的高密度显示屏上，字体可能会小到难以阅读。

　　当然，并非所有的浏览器都支持1:16的em像素比，例如Kindle Touch的浏览器有一个高密度的视窗，但通过使用1:20的比率进行调整，将默认字体的大小提高了几个像素，就可以获得更好的阅读体验。这虽然没有完全解决iPad Mini所遇到的问题，但至少让屏幕上显示的内容清晰可辨(如图2所示)。