1.2 网页界面空间的影响要素

打开同一个网页时，不同的机器上看到的界面效果可能大不相同，这是由于网页显示媒介的特性所决定的。网页界面空间显示依赖于显示器的分辨率与浏览器这两大因素。

1.2.1 分辨率与显示器

分辨率是屏幕上图片所呈现的精细度。一般而言，较高的分辨率的图片所呈现出来的细节越多、效果越好。屏幕分辨率的单位是像素，是一个相对单位，即物理设备上的1像素。一般以纵向像素×横向像素来表示一个终端设备的分辨率。如当前显示器的屏幕分辨率是1920像素×1080像素，即每一条水平线上包含有1920个像素点，共有1080根水平线。

同一显示器看一个网站，高分辨率与低分辨率看到视觉效果会有一定差别。如同样打开美食节网站（见图1.16），左图分辨率为1920像素×1080像素，能看到的图文信息更小巧丰富，右图分辨率为1366像素×768像素，感觉上略显粗糙，视觉信息展示的较少。

需要特别强调的是屏幕像素密度不是像素分辨率，屏幕像素密度是指屏幕上每英寸可以显示的像素点的数量，单位是像素/英寸（pixels per inch，ppi）。如大多数网站制作常用图片ppi为72，即每英寸像素为72，因此在设计网页的时候需要将ppi设置为72像素/英寸（见图1.17）。

1.2.2 浏览器

浏览器是指可以显示网页服务器或文件系统的HTML文件内容，并让用户与这些文件交互的一种软件。常用的浏览器有Chrome、IE、Safari、火狐、UC等（见图1.18），用户可以根据自己的喜好及浏览器特性来选择使用。

不同浏览器所用的内核不一样，其渲染机制也不相同，所以同一网页用不同浏览器访问的视觉效果和响应时间也会略有不同。如对比一下用IE（9.0版）和Chrome（45.0版）浏览器打开微软网站（见图1.19），首先，整体来看IE浏览器比Chrome浏览器展示的内容略少，信息显示的更大；其次，细节上IE浏览器下的字体较大且颜色为黑色、蓝色，广告区域的文字信息置于图片之下，菜单栏高度较高；再次，IE浏览器头部的高度略低于Chrome浏览器（见图1.20），这样会导致在浏览器容器内看到的一屏信息的高度会更高。

然而就算是同一浏览器，不同版本所呈现出来的界面效果也不尽相同。如IE 11.0、IE 9.0和IE 8.0打开“饿了么”网站（见图1.21），IE 9.0以上版本浏览器属于高级浏览器，所以IE 9.0与IE 11.0版本效果较为接近，IE 11.0版默认状态下输入框有默认文字区域位置选项，而9.0版本输入框内为空。8.0版本的效果则相差更远，它的界面仅为一个二维码。

实际上，高版本浏览器与一般浏览器的不同之处主要表现在圆角、阴影、动画、文字阴影、背景渐变等方面。我们难以让网页100%兼容所有浏览器，这就要求我们在设计界面时，需要针对当前主流用户群来选择测试的浏览器。了解当前主流浏览器的方式有查看相关的统计平台，如百度统计——流量研究院（见图1.22），其数据来源于百度统计所覆盖的超过150万的站点。例如，2016年3~5月使用量排行前三的浏览器分别是Chrome浏览器占40.61%，IE 8.0浏览器占17.98%，IE 9.0浏览器占5.39%，这为我们选择兼容的浏览器对象提供了重要的参考价值。