浏览器可视大小

 

 

网站设计时，有一个最常用的指导性原则：页面长度原则上不超过3屏，宽度不超过1屏。这个原则明显是从用户的体验出发，特别是宽度不超过一屏，其最基本的表现是浏览器不出现横向滚动条，这几乎是目前的设计准则。那么这里的一屏到底是多大呢？

普通用户通常浏览网页时，其浏览网页的有效面积会受到下面几个方面的影响：

显示器的分辨率
这个由科技发展和用户购买力及喜好决定，其数据取决于统计。

操作系统
毫无疑问目前是Windows的天下，其中WindowsXP占绝大多数。

网页浏览器
IE依旧份额最高，但是Firefox、Opera和Safari等也有一定市场。
个人定制

主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式，但是总体上这部分应该属于高级用户，绝大部分用户依旧会使用操作系统和浏览器的默认样式。

下面是关于浏览器和屏幕分辨率的统计数据：

 

 

W3Counter于2006.11.12发布的全球统计数据

某知名站点2006年10月份的数据

由上面的数据可以得出：

基本上用户分辨率都在800×600以上，绝大部分都在1024×768以上，从全球情况来看，800×600的分辨率会越来越少。

国内浏览器依旧是IE6的天下，这将会持续较长的时间。从全球市场来看，国内的Firefox2.0和IE7会逐步增长，特别当IE7的中文版推出和Windows自动更新的推广开始以及随Vista上市，IE7增长会更快。
所以计算一屏大小应基于以下原则：

一屏指绝大部分用户的浏览器显示网页的有效可视区域。

一屏的计算环境是Windows XP和浏览器均处于默认样式。

由于IE无论是否超过一屏都存在纵向滚动条的位置，Firefox和Opera是在页面超过一屏的时候出现纵向滚动条，且浏览绝大部分网页都有纵向滚动条的存在，所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。

由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏，而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页，所以一屏大小在Firefox中指多窗口的控制栏存在时。
下面是基于上面的原则得到常用浏览器和分辨率下的的数据结果：

有效可视区域（单位：px）

  有效可视区域（单位：px）屏幕一二三

800	600	1024	768	1280	1024
IE6.0	779(+21)	432(+168)	1003(+21)	600(+168)	1259(+21)	856(+168)
IE7.0	779(+21)	452(+148)	1003(+21)	620(+148)	1259(+21)	876(+148)
Firefox2.0	783(+17)	417(+183)	1007(+17)	585(+183)	1263(+17)	841(+183)
Opera9.0	781(+19)	461(+139)	1005(+19)	629(+139)	1261(+19)	885(+139)

关于上面数据的解释和一些其他事实：

在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445，Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似，所以相同分辨率下应该比Windows XP默认的样式要大。

知道浏览器型号和屏幕的分辨率能够很容易的推算出可视区域面积，比如1024×768下IE7.0的可视面积是（1024-21）×（1024-148）
综合上面所有的数据，结论如下：

最保守而最有兼容性的一屏大小是：779×432
最广泛的一屏大小是：1003×600
适合目前国内的情况，一屏大小是779×600

 

 

调整浏览器窗口分辨率的三个小插件

目前我们阿里巴巴的用户使用最多的分辨率还是在1024*768。所以大部分的设计，我们需要考虑用户在第一频能看到什么。为了方便在不同分辨率间切换，浏览器的小插件必不可少。在这里与分享一下我正在使用的三个不同浏览器下的插件。

Firefox下的Window Resizer 1.0
因为我用firefox，所以这个插件用的比较多，支持640×480, 800×600, 1024×768, 1280×800, 1280×1024, 1600×1200等分辨率
插件地址：点击安装
IE浏览器下的 Internet Explorer Developer Toolbar
微软发布的IE调试工具，同时也可以调整浏览器窗口大小。支持800×600, 1024×768, 1280×800, 1280×1024，还支持用户自定义宽度和高度。
插件地址：点击下载
Maxthon 浏览器下的ResizeWindow v0.3.0
遨游下的插件，支持 640×480,800×600,1024×768,1152×864,FullScreen
插件地址：点击安装

我最终使用了下面的这个：

https://addons.mozilla.org/zh-CN/firefox/tag/resizer

 

or

创建一个标签，其内容为：javascript:window.resizeTo(1024,768)