谈谈网页一屏有多大?
作者: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


猜你喜欢
- 一.背景在现在的网站中,接入的渠道是越来越多了,技术也是越来越先进,WAP, SMS,EMAIL, 传统的Web, Socket等等,如果连
- 最近在改个程序用到了在js中设置css的float属性,以为和平常的写法一样,原来不是,只好去请教google,原来...首先大家先来看一下
- 如果你有一批IP地址想要获得这些IP具体的信息,比如归属国家,城市等,最好的办法当时是调用现有的api接口来获取,我在之前就写过一篇文章,是
- 问题:我在 Vue 中有一个 form 表单,用于上传博客帖子,它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在 Expr
- 目录Blazor Server 应用程序中进行 HTTP 请求一、第三方 Web API 概览二、从 Blazor Sever 应用程序开始
- pycharm程序界面一般有很多子窗口,如图1所示。pycharm项目视图-运行窗口图1 Pycharm子窗口如果你发现某些子窗口不见了,图
- progress库安装和介绍1.安装progress库progress是Python第三方库,在终端执行 pip 命令安装。pip inst
- 任务1、编写程序实现乐手弹奏乐器多态class Instrument(): def make_sound(self
- android开发中在和服务器端接口对接时出现编码问题,从服务器端获取到的数据是 "\u8bbe\u59071ID-\u
- MySQL Group By用法我们现在回到函数上。记得我们用 SUM 这个指令来算出所有的 Sales (营业额)吧!如果我们的需求变成是
- 前言损失函数在机器学习中用于表示预测值与真实值之间的差距。一般而言,大多数机器学习模型都会通过一定的优化器来减小损失函数从而达到优化预测机器
- 背景今天在工作中,同事遇到一个上传图片的问题:系统要求的图片大小不能超过512KB。但是同事又有很多照片。这要是每一个照片都用ps压缩的话,
- 本文实例讲述了Python2比较当前图片跟图库哪个图片相似的方法。分享给大家供大家参考,具体如下:# -*- coding: utf-8 -
- CSS Modules:局部作用域 & 模块化CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响
- 什么是 PycharmPycharm 是目前最好用的 Python 编辑器,自带文本高亮、版本管理、数据库连接、断点调试、虚拟环境和包管理的
- FSO中除了可以对驱动器、文件夹的操作以外,功能最强大的就是对文件的操作了。它可以用来记数、内容管理、搜索还可生成动态HTML页面等等。一、
- 前言:本文的主要内容是介绍Python中的变量命名规则和简单数据类型的应用,简单的数据类型包括字符串和数字等,文中还附有代码以及相应的运行结
- MySQL中的锁锁是为了解决并发环境下资源竞争的手段,其中乐观并发控制,悲观并发控制和多版本并发控制是数据库并发控制主要采用的技术手段(具体
- 概述在PHP中有一种代码复用的技术, 因为单继承的问题, 有些公共方法无法在父类中写出, 而 Trait可以应对这种情况, 它可以定义一些复
- 1. 事务的 ACID 特性详ACID 是为保证事务(transaction)是正确可靠的,所必须具备的四个特性:原子性(Atomicity