网站设计时，有一个最常用的指导性原则：页面长度原则上不超过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)
分享到：
相关推荐
### JS 获取浏览器窗口大小 在前端开发中，经常需要获取浏览器窗口的大小，以便于根据不同的屏幕尺寸调整页面布局或实现响应式设计。本文将详细介绍如何使用JavaScript来获取浏览器窗口的宽度、高度以及相关的属性...
网页里边的Js代码是可以读取到屏幕分辨率和浏览器可视大小的。通过对分辨率的检测，可以做为是否同一用户同一个浏览器在访问的依据。 浏览器自动更改屏幕分辨率和浏览器窗口大小，这样网页中的代码就检测到我们设置...
- 使用 `window.innerWidth` 和 `window.innerHeight` 来获取浏览器窗口的可视区域尺寸，这两个属性在现代浏览器中都得到了很好的支持。 - 在处理旧版浏览器或兼容性问题时，可以使用 `document.documentElement....
在网页设计中，为了提供优秀的用户体验，让网页内容能够适应不同设备和屏幕尺寸的变化，我们需要实现根据浏览器屏幕大小高度自适应的功能。这涉及到几个关键概念和技术，包括`height`、`clientHeight`以及`onresize`...
### JavaScript 获取浏览器的显示区域大小信息 在网页开发过程中，获取浏览器显示区域的大小是非常重要的一个环节，这对于响应式设计、动态布局调整等场景尤为重要。本文将详细介绍如何使用JavaScript来获取浏览器...
1、浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。 (bodyHeight – divHeight)/2 2、浏览器可视区域如果小于元素的高度，即元素距离浏览器可视区域顶部的距离为零。 3、onresize()当...
由vis.js支持的图形可视化以及来自Neo4j的数据。 产品特点 连接到Neo4j实例以获取实时数据 用户指定的标签和要显示的属性 用户指定的Cypher查询来填充 为节点的图像的URL指定节点属性 指定边缘厚度的边缘属性 指定...
在网页设计中，为了提供更好的用户体验，特别是在不同的设备和屏幕尺寸下，往往需要根据浏览器窗口的大小来调整页面元素的尺寸。本文将详细介绍如何使用JavaScript实现根据浏览器窗口大小实时动态改变网页文字的大小...
- `document.body.clientWidth`：返回网页在浏览器窗口中的可视宽度，不包括滚动条。 - `document.body.clientHeight`：返回网页在浏览器窗口中的可视高度，同样不包括滚动条。 - `document.body.offsetWidth`：...
"电信设备-基于浏览器的可视化拖拽显示数据源信息的方法"这一主题聚焦于如何通过Web浏览器来实现用户友好的数据交互与展示。这种方法允许用户通过简单的拖拽操作在屏幕上直观地查看和理解来自不同数据源的信息，极大...
由vis.js支持的图形可视化以及来自Neo4j的数据。 产品特点 连接到Neo4j实例以获取实时数据 用户指定的标签和要显示的属性 用户指定的Cypher查询来填充 为节点的图像的URL指定节点属性 指定边缘厚度的边缘属性 指定...
IE中，浏览器显示窗口大小只能以下获取： 代码如下复制代码 代码如下:document.body.offsetWidth document.body.offsetHeight在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小： 代码如下复制代码 ...
3. 结合DOM和CSSOM：将DOM树与CSSOM树合并成渲染树，渲染树包含了页面上每一个可视元素及其样式。 4. 布局：计算渲染树中每个元素的位置和大小，形成布局信息。 5. 绘制：根据布局信息将渲染树的每个节点绘制到屏幕...
在JavaScript中，获取当前页面...以上是关于“javascript获取当前页面可视高度和宽度及浏览器宽度和高度的函数”的主要知识点，通过学习和理解这些内容，开发者可以更好地控制和适应网页在不同设备和窗口大小下的表现。
在响应式设计中，我们可以定义不同断点，当浏览器窗口大小改变时，应用相应的样式规则，使图片和布局能够自适应。 2. **响应式图像元素（Responsive Images）**： HTML5引入了`<picture>`元素和`srcset`与`sizes`...
在JavaScript中，获取当前页面可视区域的尺寸以及浏览器窗口的尺寸是常见的需求，这有助于进行响应式设计或者处理滚动事件。以下是一些相关的JavaScript函数，用于获取这些信息： 1. **getHeight() 函数**：这个...
2. **索引管理** - 用户可以通过插件创建、删除、更新索引设置，以及查看索引文档数量和大小。 3. **搜索与浏览** - 支持对索引中的数据进行实时搜索和浏览，便于数据探索。 4. **映射查看** - 可以查看并编辑索引的...
在Delphi的可视化设计环境中，开发者可以通过拖放方式将TWebBrowser组件放置到表单上，并调整其大小和位置。其他控件如按钮、菜单等也可以添加，用于提供后退、前进、刷新等功能。 4. **与HTML和JavaScript交互**...
这些属性获取的是整个HTML文档的尺寸，而不是`body`元素的尺寸，适用于需要获取整个页面可视区域大小的场景。 在不同的浏览器中，可能会存在一些差异。例如，在FireFox和IE中，当页面中添加了`<!DOCTYPE>`声明后，...