获取浏览器窗口大小

最新推荐文章于 2024-07-15 13:17:25 发布
最新推荐文章于 2024-07-15 13:17:25 发布
阅读量89 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/liuxiaoqian/p/6396182.html
版权

js获取浏览器窗口大小

 

常用:

JS 获取浏览器窗口大小

 

// 获取窗口宽度
if  (window.innerWidth)
winWidth = window.innerWidth;
else  if  ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if  (window.innerHeight)
winHeight = window.innerHeight;
else  if  ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if  (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
 

详细:

关于获取各种浏览器可见窗口大小: 
<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高）

转载于:https://www.cnblogs.com/liuxiaoqian/p/6396182.html

a1366431
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于jquery的获取浏览器窗口大小的代码
10-28
今天正好用到这个，就网上搜了搜，贴出来了。需要的朋友可以参考下。
JS获取浏览器窗口大小
10-15
JS获取浏览器窗口大小，喜欢的可以下来看看吧。
动态实时获取浏览器窗口大小
03-25 509
<form action="#" method="get" name="form1" id="form1"> <!--显示浏览器窗口的实际尺寸--> 浏览器窗口 的实际高度: <input type="text" name="availHeight" size="4"><br> ...
JS 获取浏览器显示比例，缩放比例
qq_40603010的博客
08-12 1305
JS 获取浏览器显示比例，缩放比例 JS不能调整浏览器的显示比例，仅能查看 //获取当前页面的缩放值 function detectZoom() { var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.device
JS 获取浏览器窗口大小
lixiaonaaa的博客
11-24 8144
常用: 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获取浏览器窗口大小的方法
blog-xiaoh的博客
12-24 1316
JS获取浏览器窗口大小
php 获取窗口尺寸,js如何实时获取浏览器窗口大小
weixin_39793434的博客
03-10 230
js实时获取浏览器窗口大小，我们可以使用addEventListener()方法来实现。该addEventListener()方法可以注册事件处理程序以侦听浏览器窗口resize事件，例如window.addEventListener('resize', ...)。下面我们结合具体的代码实例，给大家介绍js实时获取浏览器窗口大小的方法。代码示例如下：js实时获取浏览器窗口大小示例// 定义事件侦听...
js怎样获取浏览器窗口尺寸
hexadecimal_001的博客
04-19 416
总结起来，我们可以使用 `window.innerWidth` 和 `window.innerHeight` 属性或 `document.documentElement.clientWidth` 和 `document.documentElement.clientHeight` 属性来获取浏览器窗口的尺寸，以及使用 `screen.width` 和 `screen.height` 属性来获取整个屏幕的尺寸。注意，这些方法获取的是浏览器窗口的尺寸，而不是整个屏幕的尺寸。
JS：如何获取浏览器窗口尺寸？
TianXuab的博客
10-09 1001
JavaScript是一种广泛使用的脚本语言，用于开发网页和应用程序。在Web开发中，经常需要获取浏览器窗口的尺寸，以便根据窗口大小进行布局或执行其他操作。本文将介绍如何使用JavaScript来获取浏览器窗口尺寸。
JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
xm1037782843的博客
11-07 5234
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth
js监听html页面大小变化,JS监听窗口变化实时获取浏览器窗口大小
热门推荐
weixin_33705384的博客
06-03 1万+
原理：通过监听窗口的变化来动态获取窗口大小用到的方法：addEventListener() 监听window的resize事件js代码：// 定义事件侦听器函数function watchWindowSize() {// 获取窗口的宽度和高度，不包括滚动条var w = document.documentElement.clientWidth;var h = document.documentEl...
获取浏览器窗口大小以及位置
一个安全研究员
03-15 1437
前端开发有一个比较麻烦的事情就是需要关注与各种版本的浏览器的兼容，由于获取浏览器窗口大小与位置可能不会经常用到，所以我就把它们封装成了两个函数，以后用到可以直接引入，就不用再自己去花时间去做各种兼容。 获取窗口位置 function getWindowPos(){ var x = window.screenX||window.screenLeft; var y = wind...
js 获取浏览器窗口大小
04-12
js获取浏览器窗口事件，获取改变后的大小 下载后评论可返回1分
JS获取各种浏览器窗口大小的方法
12-09
常用:JS 获取浏览器窗口大小 代码如下:// 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; ...
HTML的文档类型与字符集＜!DOCTYPE html＞
m0_65696193的博客
07-15 289
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">我们使用的是 html 5 的版本。
财务收支管理系统（带对账）Excel模板
07-16
【作品名称】：财务收支管理系统（带对账）Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
人工智能机器学习基础非线性回归
07-16
使用python实现机器学习基础非线性回归
Python编程惯例.md
最新发布
07-16
python安装
传感器习题集.doc
07-16
传感器
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、付费专栏及课程。

余额充值