JS获取各种浏览器窗口的大小

最新推荐文章于 2023-10-29 09:49:46 发布
最新推荐文章于 2023-10-29 09:49:46 发布
阅读量6.8k 收藏
点赞数
分类专栏： IE8 文章标签： IE8

在网上找了差不多一下午的时间,终于找到了一个可以获取IE8窗口大小的文档了

http://wenku.baidu.com/view/5d6f7835b90d6c85ec3ac686.html

JS获取各种浏览器窗口的大小 

  
2008-06-21 19:03:44  来源:网页教学网  关于获取各种浏览器可见窗口大小的一点点研究 <script> function getInfo() 
{ 
   var s = ""; 
   s += " 网页可见区域宽："+ document.body.clientWidth; 
   s += " 网页可见区域高："+ document.body.clientHeight; 
   s += " 网页可见区域宽："+ document.body.offsetWidth + " (包括边线和滚动条的宽)";    s += " 网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";    s += " 网页正文全文宽："+ document.body.scrollWidth;    s += " 网页正文全文高："+ document.body.scrollHeight;    s += " 网页被卷去的高(ff)："+ document.body.scrollTop; 
   s += " 网页被卷去的高(ie)："+ document.documentElement.scrollTop;    s += " 网页被卷去的左："+ document.body.scrollLeft;    s += " 网页正文部分上："+ window.screenTop;    s += " 网页正文部分左："+ window.screenLeft;    s += " 屏幕分辨率的高："+ window.screen.height;    s += " 屏幕分辨率的宽："+ window.screen.width; 
   s += " 屏幕可用工作区高度："+ window.screen.availHeight;    s += " 屏幕可用工作区宽度："+ window.screen.availWidth; 
   s += " 
你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 
   s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";    //alert (s); } 
getInfo(); </script> 
在我本地测试当中： 
在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight即可获得，很简单，很方便。 而在公司项目当中： Opera仍然使用 
document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 
document.documentElement.clientWidth document.documentElement.clientHeight 

原来是W3C的标准在作怪啊 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 如果在页面中添加这行标记的话 

在IE中： 

document.body.clientWidth ==> BODY对象宽度 
document.body.clientHeight ==> BODY对象高度 

document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 

在FireFox中： 

document.body.clientWidth ==> BODY对象宽度

 document.body.clientHeight ==> BODY对象高度 

document.documentElement.clientWidth ==> 可见区域宽度 

document.documentElement.clientHeight ==> 可见区域高度 ? 

在Opera中：  
document.body.clientWidth ==> 可见区域宽度 
document.body.clientHeight ==> 可见区域高度 
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） 
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
而如果没有定义W3C的标准，则 IE为： 

document.documentElement.clientWidth ==> 0

 document.documentElement.clientHeight ==> 0

 FireFox为： 

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） Opera为： 

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 

真是一件麻烦事情，其实就开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。

另外,再附上一个获取当前可见区域大小的函数

http://mauzon.com/how-to-get-real-window-width/

function getWindowWidth() {
		var windowWidth = 0;
		if (typeof(window.innerWidth) == 'number') {
			windowWidth = window.innerWidth;
		}
		else {
			if (document.documentElement && document.documentElement.clientWidth) {
				windowWidth = document.documentElement.clientWidth;
			}
			else {
				if (document.body && document.body.clientWidth) {
					windowWidth = document.body.clientWidth;
				}
			}
		}
		return windowWidth;
	}


jquery获取当前窗口宽度的方法
获取浏览器显示区域的高度:$(window).height();
获取浏览器显示区域的宽度:$(window).width();
获取页面的文档高度:$(window).height();
获取页面的文档宽度:$(window).width();
jquery

jajavaja
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS获取各种浏览器窗口大小的方法
10-26
本篇文章主要是对JS 获取各种浏览器窗口大小的方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
js设置浏览器窗口大小,javascript怎么设置按钮
2301_79533350的博客
10-29 157
大家好，小编为大家解答js设置浏览器窗口大小的问题。很多人还不知道javascript怎么设置按钮，现在让我们一起来看看吧！open() 方法可以查找一个已经存在或者新建的浏览器窗口。
js 控制浏览器 实现全屏 和 退出全屏功能
拿回忆下酒
03-08 1468
在工作中我们偶尔遇到不需要浏览器，需要将整个项目的情况，虽然有一些，但我们更希望项目中有类似的功能，可以让用户任意切换。
用 javascript 控制浏览器窗口大小
幽狼
12-23 3075
  Q：用 JavaScript 控制浏览器窗口大小   A：有时候，我们需要控制显示窗口的大小，这当然能够通过点击窗口右上角的控制按钮来实现。但是，能否在页面中通过链接来实现呢？答案是：能！请看下面的代码：      〈SCRIPT LANGUAGE=“JavaScript“〉       function Minimize()       {       window.innerWidth
第一个windows API窗口程序
xianyudewo的博客
09-23 573
步骤编写WinMain函数设计窗口类注册窗口类创建窗口显示并更新窗口编写消息循环编写窗口过程函数总结整体源码第一次写Windows窗口程序，第一次写博客，遇到很多问题。 编写WinMain函数 WinMian函数格式固定，可以直接粘贴复制 int WINAPI WinMain(HINSTANCE hInstance, //应用程序实例 HINSTANCE hPrevInstance, //上一个应用程序实例，不用 LPSTR lpCmdLine, //命令行参数 int nCmdShow //窗口显示
浏览器放大缩小,页面布局不变,浏览器放大百分比,页面放大到左上角,浏览器缩小百分比,页面缩小至中间(类似csdn官网效果)
song_song0927的博客
04-12 3204
js控制页面随浏览器放大缩小,页面布局不变,按住ctrl,滑动滚轮放大浏览器百分比时,页面放大至左上角,缩小百分比时,页面缩小至中间
JS获取浏览器窗口大小
10-15
JS获取浏览器窗口大小，喜欢的可以下来看看吧。
js 获取浏览器窗口大小
04-12
js获取浏览器窗口事件，获取改变后的大小 下载后评论可返回1分
关于获取各种浏览器可见窗口大小
12-07
关于获取各种浏览器可见窗口大小，各种各样的窗口大小，也有一些讲解，非常适合当做工具书收藏起来，各位看官千万不要错过哦。
JS获取当前窗口的宽和高
wang_swa99er的博客
09-09 5318
JS获取当前窗口的宽和高 window.onload = function(){ document.onclick = function(){ //输出当前窗口的宽 var windowWidth = document.documentElement.clientWidth || document.body.clientWidth; alert(windowWidth); //输出当前窗口的高 var windowHe
javascript 浏览器窗口大小改变事件
03-26
NULL 博文链接：https://272426068.iteye.com/blog/1143976
JS 获取浏览器窗口大小
lixiaonaaa的博客
11-24 8110
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; els
js怎样获取浏览器窗口尺寸
子玉的博客
10-29 779
总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。
JavaScript中获取屏幕，窗口和网页大小
不怕麻烦的鹿丸的博客
09-14 501
【代码】JavaScript中获取屏幕，窗口和网页大小。
JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位
不断成长的我
08-11 4011
浏览器的宽高示意图： JavaScript中常用的方法： 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线
js获取浏览器宽度高度（整理）
热门推荐
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
设计.zip
04-25
设计.zip
vue禁止缩放浏览器窗口大小
07-16
### 回答1： 在Vue中，禁止缩放浏览器窗口大小有几种方法可以实现。 第一种方法是通过CSS样式来禁止缩放。在HTML文件的`<head>`标签内，可以添加以下CSS样式代码： ```css <style> body { zoom: reset !important; -moz-transform: scale(1) !important; -moz-transform-origin: top left !important; -o-transform: scale(1) !important; -o-transform-origin: top left !important; -webkit-transform: scale(1) !important; -webkit-transform-origin: top left !important; } </style> ``` 上述代码中，`zoom`属性用于禁止缩放，`transform`属性用于重置缩放，并通过`!important`规定样式的优先级。 第二种方法是在Vue组件中使用JavaScript来禁止缩放。在Vue组件的`<script>`标签内，可以添加以下代码： ```javascript mounted() { window.addEventListener('resize', this.handleResize); }, methods: { handleResize() { window.resizeTo(window.innerWidth, window.innerHeight); } }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); } ``` 上述代码中，`mounted`钩子函数用于在组件挂载时添加窗口缩放事件监听器，`handleResize`方法用于重新设置浏览器窗口大小为当前窗口大小。 需要注意的是，以上两种方法可能会因为浏览器的安全策略而被禁用，所以在实际开发过程中，建议综合考虑用户体验和浏览器安全性，并根据实际需求选择合适的方法来禁止缩放浏览器窗口大小。 ### 回答2： 在Vue中禁止缩放浏览器窗口大小需要通过一个简单的CSS样式来实现。首先，我们可以选择在Vue组件的根元素上添加以下样式： ```css <style> html, body { overflow: hidden; } </style> ``` 在上述代码中，我们将根元素的html和body标签的overflow属性都设置为hidden，这将禁止用户对整个窗口进行任何缩放操作。 此外，如果我们只想禁止水平或垂直方向的窗口缩放，可以将overflow-x或overflow-y属性值设置为hidden。例如，如果我们只想禁止水平缩放，可以将样式修改如下： ```css <style> html, body { overflow-x: hidden; } </style> ``` 需要注意的是，以上样式只是在Vue组件中禁止窗口缩放的一种方法。如果我们需要在整个网页中禁止窗口缩放，可以在全局CSS文件或HTML文件中使用相同的样式。 最后，需要提醒的是，虽然可以通过这种方式禁止窗口缩放，但这可能会违反用户体验的原则。因此，在实际应用中，我们应该慎重考虑是否真的需要禁止窗口缩放，并根据具体情况进行权衡。 ### 回答3： 要禁止缩放浏览器窗口大小，可以使用CSS样式和Vue的指令来实现。 首先，在Vue组件的模板中，添加一个元素作为容器来包裹内容，可以使用一个div元素，并给它一个唯一的id标识，例如"app"。 接下来，在Vue组件的样式中，使用CSS样式来设置这个容器的宽度和高度，并将"overflow"属性设置为"hidden"，这样就可以阻止浏览器的滚动条出现。可以在Vue组件的style标签中添加如下样式： ``` <style> #app { width: 100%; height: 100%; overflow: hidden; } </style> ``` 最后，使用Vue的指令来动态绑定这个容器的大小，以使其与浏览器窗口大小保持一致。可以在Vue组件的script标签中添加如下代码： ``` <script> export default { mounted() { window.addEventListener('resize', this.handleResize); this.handleResize(); }, methods: { handleResize() { const app = document.getElementById('app'); app.style.width = window.innerWidth + 'px'; app.style.height = window.innerHeight + 'px'; } }, destroyed() { window.removeEventListener('resize', this.handleResize); } } </script> ``` 上述代码中，我们通过监听"resize"事件来调用handleResize方法，并在组件挂载时添加事件监听器。在handleResize方法中，我们获取到容器的DOM元素，并将其宽度和高度设置为浏览器窗口的宽度和高度。同时，在组件销毁时，移除事件监听器。 通过以上方法，我们就可以禁止缩放浏览器窗口大小，并且保持Vue组件与浏览器窗口的大小一致。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值