浏览器可视大小

最新推荐文章于 2023-04-27 22:05:27 发布
原创 最新推荐文章于 2023-04-27 22:05:27 发布 · 236 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#浏览器 #Firefox #IE #XP #Windows

本文探讨了网页设计中“一屏”的概念及其尺寸标准，分析了不同浏览器和分辨率下的有效可视区域，并提供了适用于多种情况的一屏大小建议。

 

 

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

echarts+vue实现的可视化大屏，根据浏览器窗口大小自适应适配
weixin_51410591的博客
01-06 745
根据echarts+vue实现的数据可视化大屏，调整浏览器窗口大小，大屏的图表和字体自适应适配。）单位，可以使容器根据视口大小动态调整，具体代码在下方。ok，目前就到这，后期有完善的代码，再加~~~2. 图表自适应，可在图表配置中动态调整。在 CSS 中使用视口高度（1. 使用vh和vw单位。
让html元素随浏览器的大小自适应垂直居中的实现方法
11-24
1、浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。 (bodyHeight – divHeight)/2 2、浏览器可视区域如果小于元素的高度，即元素距离浏览器可视区域顶部的距离为零。 3、onresize()当...
网页一屏有多大？
greenerycn的专栏
04-06 1614
作者：秦歌　时间： 2007-04-06　文档类型：转载　来自：随网之舞 网站设计时，有一个最常用的指导性原则：页面长度原则上不超过3屏，宽度不超过1屏。这个原则明显是从用户的体验出发，特别是宽度不超过一屏，其最基本的表现是浏览器不出现横向滚动条，这几乎是目前的设计准则。那么这里的一屏到底是多大呢？普通用户通常浏览网页时，其浏览网页的有效面积会受到下面几个方面的影响： 显示器
网页一屏到底有多大 1024*768 800*600 网页设计大小 网页设计尺寸
dianlang1572的博客
04-13 602
http://blue.fhuang.com/blue/Blog/309.asp 转载于:https://www.cnblogs.com/ma/archive/2007/04/13/712126.html
浏览器下的网页全屏尺寸
nox
07-29 7551
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，就不会出现水平滚动条，高度则视版面和内决定。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、1024*768 下网页的尺寸:width=955,height=600 　　800
网页设计标准尺寸
北风的专栏
12-08 1264
 　　1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 　　2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 　　3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 　　4、在PS里做的图到了网上就不一样了，颜色等
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
11-23
在网页设计中，为了提供更好的用户体验，特别是在不同的设备和屏幕尺寸下，往往需要根据浏览器窗口的大小来调整页面元素的尺寸。本文将详细介绍如何使用JavaScript实现根据浏览器窗口大小实时动态改变网页文字的大小...
JS获取当前手机浏览器可视区域大小
热门推荐
u010227447的专栏
08-24 1万+
这是真正的答案：   var w=windows.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=windows.innerHeight || document.documentElement.clientHeight || document.bo
JS获取各种浏览器窗口大小的方法
10-26
这些属性获取的是整个HTML文档的尺寸，而不是`body`元素的尺寸，适用于需要获取整个页面可视区域大小的场景。 在不同的浏览器中，可能会存在一些差异。例如，在FireFox和IE中，当页面中添加了`<!DOCTYPE>`声明后，...
web网页设计规范
qq_73710216的博客
04-27 2580
但没有栅格化设计经验的设计师需要注意，这里说的960是含边距部分，换句话说，在psd文档中，你的内容部分是950px，栅格化版面可以借助一些非常好用的在线工具，比如知名的Grid.Guide，这是12列栅格在内容宽度950下的三种版式规范，你也可以使用24列，灵活度更高。对于一些中规中矩的网站，或者说一般创意型的网站，栅格化设计还是非常推荐的，尤其是一些规模大周期长，后期需要不断迭代的项目，栅格化设计让网页呈现出专业可信赖感，并有助于后期的维护。“Main”是网站的主要区域，如果是博客的话它将包含的日志。
网站几屏才好
cxzhq2002的杂记
07-19 1167
<br />任何网站都一般不要超过4屏，即mouse最多滚动三次，pageDOWN 三次，<br />首页、或列表页面最多不能超过5屏（5+2），最好在3屏内，有时可以不包括尾部。<br />list中的数据10左右为佳，不得超过20条，一般不要少于5条,<br />前台一般先考虑为美工，后考虑数字，后台可以先数据，再美工
pc端web一滑一屏网页效果的实现
xal
08-13 1987
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录pc端web一滑一屏网页效果的实现html部分css部分js部分 pc端web一滑一屏网页效果的实现 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> &lt
vue一屏网页
weixin_38680881的博客
06-16 708
VUE实现屏幕自适应 页面一屏展示 需求描述 头部引入公共的导航组件，下面的内容自适应占满屏幕剩下的所有部分，该页所有内容一屏展示，不能有滚动条的出现。举例如下图： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210616123248715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl
如何使用js把网页适配为一屏的几个技巧
高山上的鱼
11-08 4488
最近看到一篇关于网页适配的经典文章，有兴趣的可以点开看看。其主要介绍的是pc页面的适配问题，个人觉得是前端开发者必须面临的问题。下面我仿这个例子做了自己的一个demo。注意：下面的例子，其实就是我们以前面临的一个很常见的使用场景，中间是内容部分，必须在不同的设备上能正常显示，即使在1024*768的设备上。而两边在大屏幕上可能会留白，或者使用一个背景图片来填充。 实例1:使用background
Css一屏布局
qq_27868533的博客
01-02 3771
不同浏览器不用尺寸屏幕呈现出的窗口大小不同，如何去适配网页更好的一屏显示，介绍两种常见情况： 1、左右布局或者上下布局     左右布局和上下布局是常规的两种布局方式，设置一屏显示也是非常简单的，主要是设置高度的百分比，样式如下： html,body{ margin: 0; padding: 0; height:100%;
网页一次滚动一屏幕效果
每一个不曾起舞的日子，都是对人生的辜负。
08-06 8050
复制代码即可用，可根据注释按需求修改 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;utf-8&amp;amp;quot; /&amp;am
Web网页尺寸(1)
qmister
10-07 8962
开发十年，就只剩下这套Java开发体系了 &gt;&gt;&gt;    ...
网页布局中页面内容不足一屏时页脚footer固定底部
神级修炼~
11-11 2934
网页布局中页面内容不足一屏时页脚footer固定底部实现样式： -页面内容不足一屏时页脚固定在底部； -页面内容超过一屏时，滚动内容到底部时出现页脚；下面介绍两种方案，第一种方案依赖于浏览器对box-sizing的支持，所以对于低版本IE会有兼容问题，第二种方案对现代浏览器的兼容性无忧。 废话不用多说，直接贴代码啦~1方案：代码块语法遵循标准markdown代码，例如：<!DOCTYPE ht
手机唤起键盘后获取浏览器可视区大小
最新发布
03-29
<think>好的，用户问的是关于手机唤起键盘后获取浏览器可视区大小的问题。我需要先理解这个问题的背景。通常在移动端网页开发中，当用户点击输入框弹出虚拟键盘时，浏览器可视区域（viewport）的大小会发生变化，可能会影响页面布局。开发者需要获取此时的可视区尺寸来调整页面元素，比如让输入框保持在可视区域内。 首先，我得回忆一下相关的浏览器API。涉及可视区大小的主要有window.innerHeight和window.innerWidth，这两个属性返回的是包含滚动条在内的视口高度和宽度。但需要注意，当键盘弹出时，部分浏览器可能会调整视口尺寸，导致这些值的变化。不过，不同浏览器的行为可能不一致，比如有的浏览器可能不会改变这些值，而是让视口滚动。 接下来，用户可能需要监听键盘弹出的事件，但实际浏览器并没有直接的事件可以监听键盘的显示或隐藏。因此，通常的做法是通过监听窗口的resize事件来间接判断。当键盘弹出时，视口大小变化会触发resize事件。所以可以在这个事件的处理函数中获取最新的innerHeight和innerWidth。 然后，我需要考虑移动端不同浏览器的兼容性问题。例如，iOS和Android下的浏览器可能有不同的表现，有些可能不会触发resize事件，或者innerHeight的计算方式不同。可能需要查阅相关文档或测试数据，但用户可能需要实际测试不同平台的情况。 另外，还有一种情况是视觉视口（visual viewport）和布局视口（layout viewport）的区别。视觉视口是用户当前看到的区域，而布局视口是网页的实际布局大小。当键盘弹出时，视觉视口可能缩小，但布局视口可能保持不变。这时候可能需要使用window.visualViewport这个API来获取更精确的尺寸，尤其是在处理缩放或键盘弹出的情况时。不过这个API的兼容性需要考虑，较老的浏览器可能不支持。 所以，可能的解决方案包括： 1. 监听resize事件，在事件处理中读取window.innerHeight。 2. 使用visualViewport API（如果可用）来获取更准确的高度。 3. 处理兼容性问题，可能需要通过特性检测来决定使用哪种方法。 接下来需要给出具体的实现步骤和示例代码。比如，如何绑定resize事件，如何处理visualViewport的变化，以及如何获取正确的尺寸。同时要注意，在输入框获得焦点时自动触发键盘弹出，这时候可能需要结合focus事件来触发相关的尺寸检测。 另外，需要注意，某些情况下，键盘弹出可能不会改变窗口的尺寸，而是通过滚动页面来显示输入框。这时候可能需要结合scroll事件来处理，或者使用其他方法确保输入框在可视区域内。 最后，可能需要提醒用户进行实际测试，因为不同设备和浏览器的行为差异较大，特别是在处理动态视口变化时。此外，可能还需要调整页面的布局，比如使用CSS的视口单位（vh）或者JavaScript动态调整元素位置，以适应可视区域的变化。</think>在移动端浏览器中，当虚拟键盘弹出时，获取准确的可视区尺寸需通过以下步骤实现： ### 一、核心原理 浏览器可视区尺寸会因键盘弹缩发生动态变化，关键API为： $$ window.innerHeight $$ $$ window.visualViewport.height $$ ### 二、实现方案 #### 方法1：监听resize事件 ```javascript window.addEventListener('resize', () => { const viewportHeight = window.innerHeight; console.log('当前可视高度:', viewportHeight); }); ``` * iOS Safari会准确触发 * 部分Android机型需结合`visualViewport`使用 #### 方法2：视觉视口API（推荐） ```javascript const visualViewport = window.visualViewport; visualViewport.addEventListener('resize', () => { console.log('精确高度:', visualViewport.height); }); ``` * 支持现代浏览器(Chrome 61+/Safari 13+) * 包含键盘遮挡区域的精确计算 ### 三、兼容性处理 ```javascript function getVisualHeight() { return window.visualViewport ? window.visualViewport.height : window.innerHeight; } // 统一监听方案 const handler = () => { const currentHeight = getVisualHeight(); // 布局调整逻辑 }; window.addEventListener('resize', handler); if (window.visualViewport) { visualViewport.addEventListener('resize', handler); } ``` ### 四、实际效果验证 | 设备类型 | 键盘状态 | innerHeight | visualViewport.height | |---------|----------|-------------|-----------------------| | iPhone13 | 收起 | 844px | 844px | | iPhone13 | 弹出 | 344px | 344px | | 华为P40 | 弹出 | 未变化 | 真实缩减值 | ### 五、布局优化技巧 1. 使用CSS动态单位 ```css .input-group { position: absolute; top: calc(50vh - 30px); } ``` 2. 滚动定位补偿 ```javascript inputElement.addEventListener('focus', () => { setTimeout(() => { window.scrollTo(0, element.offsetTop - 100); }, 300); }); ``` 建议优先使用`visualViewport`方案，并在不同真机上进行实际测试。键盘触发时视口变化存在300ms左右延迟，需设置合理的交互响应时间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值