【小技巧】JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

最新推荐文章于 2025-09-07 12:15:11 发布
最新推荐文章于 2025-09-07 12:15:11 发布
阅读量70 收藏
点赞数
文章标签： xhtml javascript ViewUI
本文提供了一个简单的示例代码，用于展示如何使用JavaScript来获取并显示浏览器窗口的实际宽度和高度。通过检测不同浏览器环境下的窗口尺寸，可以实现网页内容自适应布局。
ContractedBlock.gifExpandedBlockStart.gifCode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>请调整浏览器窗口</title>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
    <h2 align="center">
        请调整浏览器窗口大小</h2>
    <hr>
    <form action="#" method="get" name="form1" id="form1">
    <!--显示浏览器窗口的实际尺寸-->
    浏览器窗口 的 实际高度:
    <input type="text" name="availHeight" size="4"><br>
    浏览器窗口 的 实际宽度:
    <input type="text" name="availWidth" size="4"><br>
    </form>

    <script type="text/javascript">  
    <!--   
        var winWidth = 0;   
        var winHeight = 0;   
        function findDimensions() //函数：获取尺寸   
        {   
             //获取窗口宽度   
             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;   
             }   
             //结果输出至两个文本框   
             document.form1.availHeight.value= winHeight;   
             document.form1.availWidth.value= winWidth;   
        }   
        findDimensions();                  //调用函数，获取数值   
        window.onresize=findDimensions;   
    //-->  
    </script>

</body>
</html>

 

JavaScript技巧：获取屏幕宽高的方法
laugh666的博客
10-10 1126
window对象提供了innerWidth和innerHeight属性，可以用来获取浏览器窗口的内部宽度和高度，即排除滚动条的宽度。window对象的outerWidth和outerHeight属性表示浏览器窗口的外部宽度和高度，包括边框和滚动条的宽度。需要注意的是，以上方法获取的屏幕宽高可能会因为浏览器窗口的大小、缩放或其他因素而有所不同。document对象的documentElement属性表示整个文档的根元素，可以通过该属性获取文档的宽度和高度。如有任何疑问，请随时提问。
php js获取屏幕宽度,JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧...
weixin_42324688的博客
04-01 192
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHeight (包括边线的宽)网页正文全文宽：document.body.scrollWidth网页正文全文高：documen...
获取屏幕、当前网页和浏览器窗口的大小
HuntsBot的博客
01-07 2183
我怎样才能获得 windowWidth、windowHeight、pageWidth、pageHeight、screenWidth、screenHeight、pageX、pageY、screenX、screenY，它们适用于所有主流浏览器?https://i.stack.imgur.com/6xPdH.png
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_
weixin_34247299的博客
03-30 133
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/790.html
js 获取father_JavaScript中获取高度和宽度函数总结_javascript技巧
weixin_39970166的博客
12-22 679
html代码：这是父元素，屏幕分辨率是1366*768这是子元素，祝大家国庆快乐这是孙子元素，祝大家国庆快乐我的博客:www.jb51.net程序爱好者QQ群:259280570欢迎你加入国庆快乐数据输出css：*{margin: 0 auto;}.father{width: 500px;height: 750px;border: 5px solid red;float: left;}.son{w...
css浏览器高度变化,使用CSS更改浏览器高度时调整div宽度
weixin_29092031的博客
08-04 685
为了保持div的宽高比，一直在寻找仅有CSS的解决方案的几天时间。重要的部分是div高度应该是浏览器窗口的高度(不滚动和不隐藏溢出)，并且宽度百分比应该调整以保持纵横比正确。到目前为止我发现的所有东西(主要是填充技巧)都使用父元素的宽度来维持方面，并在div下面增加了很多额外空间，尤其是在大屏幕上的全屏幕中。使用CSS更改浏览器高度时调整div宽度真的试图避免javascpript。这里是我的基本...
HTML开发小技巧：根据用户浏览器的分辨率调整控件的大小
ioioppk的博客
07-25 1298
在Html页面开发中，我们通常会用Style进行控件的宽度高度进行控件的格式设置，如果直接设置像素的话，无法根据用户的浏览器进行宽高的适配，所以我们要做到根据实际使用的浏览器进行控件大小的自动调整，以下是几种控件自动调整的方式：
js获取页面卷曲高度兼容写法
weixin_43617604的博客
07-01 2271
js获取页面卷曲高度兼容写法 window.onscroll = function (e) { var scrolltop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; console.log(scrolltop);...
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
10-22
本文主要介绍如何使用JavaScript实现根据浏览器窗口大小动态调整网页文字大小的功能。该技术在实现网页响应式设计中具有重要意义，允许网页内容在不同尺寸的屏幕设备上都能保持良好的可读性和布局适应性。 首先，...
jQuery 获取屏幕高度、宽度的简单实现案例
10-22
以下是一些基于jQuery的实用方法和技巧，用于获取屏幕的宽度和高度。 首先，通过jQuery对象获取当前窗口的可视区域高度和宽度，可以使用以下属性： - $(window).height()：返回浏览器当前窗口的可视区域高度。 - $...
JS获取屏幕高度的简单实现代码
10-22
获取屏幕高度和浏览器窗口高度是Web开发中经常需要进行的操作，这些属性在解决布局适配、元素定位等常见问题时非常有帮助。 一、窗口尺寸属性 1. window.innerWidth 和 window.innerHeight 这两个属性表示浏览器...
JavaScript简单修改窗口大小的方法
10-23
在讨论JavaScript简单修改窗口大小的方法时，我们首先要了解的是Web浏览器窗口控制的相关技术。JavaScript提供了多种方式来对浏览器窗口进行操作，而其中最为常用的就是window对象的moveTo和resizeTo方法。本文将...
Linux | i.MX6ULL 搭建 Web 服务器（第二十章）
最新发布
m0_45463480的博客
09-07 48
本文介绍了在iTOP-IMX6ULL开发板上搭建Web服务器的过程。使用arm-2014.05编译器及Busybox文件系统，通过boa-0.94.13实现轻量级Web服务。详细说明了配置交叉编译器、编译安装boa的步骤，并创建了一个简单的测试网页index.html。最终通过运行boa命令成功启动Web服务器，为嵌入式系统提供了Web访问功能。整个过程展示了如何在资源受限的嵌入式环境中部署基础Web服务。
【JavaScript】你都如何得到一个ID？
等时钟成长
09-04 1122
本文探讨了前端开发中生成唯一ID的几种方法。首先介绍了基于时间戳的方案，包括Vite的单调递增时间戳和Yeast的时间戳+序号组合，后者通过base64编码缩短ID长度。其次分析了随机数方案，如简单的36进制转换和更专业的NanoID库，后者利用crypto.getRandomValues()生成更安全的随机ID。文章还深入解析了NanoID的自定义字符集实现细节，包括掩码计算和位运算优化。这些方法各具特点，开发者可根据安全性、性能和易用性需求选择合适的方案。
Vue基础知识-脚手架开发-子传父-props回调函数实现和自定义事件（$on绑定、$emit触发、$off解绑）实现
2503_91308956的博客
09-04 1205
本文演示了Vue2中两种子组件向父组件传递数据的方法：1）通过props回调函数，父组件传递回调函数给子组件，子组件调用该函数传参；2）通过自定义事件，父组件给子组件绑定事件，子组件用$emit触发并传参。
java小项目 未来出行汽车租赁平台
xiaoyoukaoer的博客
09-06 245
未来出行汽车租赁平台是基于Java开发的汽车租赁管理系统，旨在为用户提供便捷的车辆租赁服务。系统包含用户管理、车辆管理、订单管理等功能模块，适用于小型企业或个人学习使用。
WebView安全实现（二）
samli的博客
09-04 1090
本文总结了WebView的安全风险与防御方案。WebView的主要攻击路径包括Intent、deeplink和特殊端口/协议，风险函数如loadUrl()、evaluateJavascript()等可能被滥用。文章分析了"一句话修复方案"的局限性，列举了沙盒突破、白名单绕过等攻击手法，并提供了分层防御策略：1）基础配置加固，禁用不必要的功能；2）严格的白名单校验机制；3）运行时防护措施如子帧隔离和API验证；4）针对特定业务场景定制安全方案。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值