手机屏幕上的计数器

现代移动设备在物理上的限制，从根本上改变了网页版面的行为方式，也改变了各个元素彼此之间打交道的方式。一个在宽大的桌面显示器上看起来比例完美的版面元素，一旦被硬塞进智能手机屏幕的狭窄范围里，很容易造成严重的结构性问题。

把一张尺寸固定的外部图形接进来，等于是在一个原本灵活流动的环境里，塞进了一块僵硬的方块。

如果这个方块碰巧比可用的屏幕空间还宽，它就会撑破版面的边界。这会迫使整个网页变得可以左右滚动，而这种效果让读文字变成一件极其令人烦躁的事。

让页面横着滑的那条滚动条

在移动设备上，一张尺寸不合的图形最常见的症状，是浏览器窗口底部突然冒出一条水平的滚动条。当一张固定宽度的图片拒绝缩小时，浏览器只好把虚拟的画布向外扩展，一直扩到玻璃屏幕的物理边界之外，好把它容纳下来。

当读者试着往下滚动去看一篇文章时，文字就不停地左右摇晃。这种不稳定毁掉了阅读的体验，并且给人留下一个印象：这个网站是坏的，是不专业的。

要避开这种情况，选定的视觉设计必须有一个最大宽度，而且这个宽度要稳稳地低于一块较旧的智能手机屏幕的标准宽度。从目录里挑一个紧凑的设计，就彻底消除了版面意外撑开的风险。

当图形中包含如果不放大就小得无法辨认的文本或数字时，就会出现另一个关键问题。虽然桌面显示器允许舒适地阅读微小的字体，但在手臂长度处拿着的手机屏幕需要更大、更清晰的排版。

如果图片里的数字在移动设备的标准尺寸下辨认不出来，这个元素也就完全失去了它存在的意义：它从一件传递信息的工具，变成了一堆毫无意义的像素。

选择优先考虑大尺寸、高对比度数字而不是装饰性边框或背景图像的设计至关重要。数值必须一目了然地被立即识别，而无需进行捏合缩放手势。

在为移动端的阅读作优化时，这个元素放在哪里，也需要换一套办法。前面已经说过：在窄屏幕上，侧栏通常会被赶到页面的最底部，堆在正文的下面。

这意味着放置在侧栏中的元素最终将紧挨着放置在页脚中的元素。如果两个区域都包含刚性图形或宽文本块，那么当被迫进入这种堆叠排列时，它们可能会发生碰撞并尴尬地重叠。

在页脚里做一个干净的居中对齐，通常是最稳妥的解法。把元素居中，可以保证它与屏幕两侧保持相等的距离，形成一种平衡而协调的外观，并且能完美地适应设备的任何一种朝向。