谈谈网页一屏有多大?

作者:tension 来源:蓝色理想 时间:2007-12-21 12:28:00 

网站设计时,有一个最常用的指导性原则:页面长度原则上不超过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)
屏幕 一 二 三
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

标签:分辨率,浏览器,设计
0
投稿

猜你喜欢

  • Linux下MySQL整个数据库的备份与还原

    2008-12-29 13:20:00
  • python执行等待程序直到第二天零点的方法

    2023-08-27 11:49:21
  • python读取mysql数据绘制条形图

    2024-01-26 16:15:07
  • python编程之requests在网络请求中添加cookies参数方法详解

    2023-07-03 00:48:23
  • Python进阶篇之正则表达式常用语法总结

    2022-03-27 08:45:18
  • Pycharm中SQL语句提示SQL Dialect is Not Configured的解决

    2021-09-05 16:23:15
  • JavaScript快速实现一个颜色选择器

    2024-04-28 09:38:09
  • 完全卸载mysql(停止服务、卸载相关程序、删除注册表

    2024-01-24 12:53:40
  • 详解Python NumPy中矩阵和通用函数的使用

    2023-05-29 15:57:18
  • mysql支持跨表delete删除多表记录

    2024-01-27 06:12:29
  • php中获取指定IP的物理地址的代码(正则表达式)

    2023-11-23 07:04:36
  • Python实现的径向基(RBF)神经网络示例

    2022-03-06 23:44:35
  • Django在admin后台集成TinyMCE富文本编辑器的例子

    2021-10-03 15:43:12
  • 详解OpenCV和PIL读取和显示图像的差异

    2021-07-06 22:17:22
  • vue组件实现可搜索下拉框扩展

    2024-05-28 15:41:57
  • 使用python实现画AR模型时序图

    2021-07-03 01:11:08
  • Python增强赋值和共享引用注意事项小结

    2023-08-28 01:55:02
  • python BlockingScheduler定时任务及其他方式的实现

    2022-02-13 17:32:25
  • python进行相关性分析并绘制散点图详解

    2023-02-25 14:45:54
  • MySQL数据库磁盘优化

    2008-11-24 17:29:00
  • asp之家 网络编程 m.aspxhome.com