开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js读取屏幕高度

在JavaScript中，读取屏幕高度通常指的是获取浏览器窗口的视口（viewport）高度。以下是一些常用的方法和相关概念：

基本概念

视口（Viewport）：浏览器窗口中显示网页内容的区域。
窗口高度：浏览器窗口的总高度，包括工具栏、地址栏等。
视口高度：浏览器窗口中用于显示网页内容的高度。

常用方法

window.innerHeight：返回浏览器窗口的视口高度，包括滚动条（如果存在）。
document.documentElement.clientHeight：返回文档元素（<html>）的视口高度，不包括滚动条。
window.screen.height：返回整个屏幕的高度，而不是浏览器窗口的高度。

示例代码

// 获取视口高度（包括滚动条）
var viewportHeight = window.innerHeight;
console.log("Viewport Height (including scrollbar): " + viewportHeight);

// 获取视口高度（不包括滚动条）
var clientHeight = document.documentElement.clientHeight;
console.log("Viewport Height (excluding scrollbar): " + clientHeight);

// 获取整个屏幕的高度
var screenHeight = window.screen.height;
console.log("Screen Height: " + screenHeight);

应用场景

响应式设计：根据视口高度调整页面布局，确保在不同设备上都能良好显示。
动态内容加载：根据视口高度动态加载内容，优化用户体验。
全屏应用：在全屏模式下，获取视口高度以实现更好的布局控制。

可能遇到的问题及解决方法

滚动条影响：window.innerHeight 包括滚动条，而 document.documentElement.clientHeight 不包括。根据需求选择合适的方法。
窗口大小变化：监听窗口大小变化事件，动态调整布局。
窗口大小变化：监听窗口大小变化事件，动态调整布局。

总结

使用 window.innerHeight 获取视口高度（包括滚动条）。
使用 document.documentElement.clientHeight 获取视口高度（不包括滚动条）。
使用 window.screen.height 获取整个屏幕的高度。
根据具体需求选择合适的方法，并监听窗口大小变化事件以实现动态调整。

希望这些信息对你有所帮助！如果有其他问题，请随时提问。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js获取网页屏幕可视区域高度

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth...==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度看了以上代码，可能会有疑问说body和可见区域到底有什么不同呢，我们在console...return document.documentElement.clientWidth || document.body.clientWidth; 4 } 5 6 // 获取浏览器窗口的可视区域的高度

9.5K1 0

JavaScript 获取屏幕的高度和宽度

screen.width:显示浏览器的屏幕的宽度 screen.Height:显示浏览器的屏幕的高度 screen.availWidth：显示浏览器的屏幕的可用宽度 screen.availHeight...:显示浏览器的屏幕的可用高度（这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。）

7.2K2 0

高度图地形读取与漫游

地形系统在3d程序中是一个重要的部分,这里介绍一下我正在使用的一个简单的地形类.地形数据可以保存在一张灰度图里面,所谓的灰度图就是一张只有黑色和白色的图片,使用颜色深度代表数据大小.我们可以读取出图片上每个像素的颜色值作为地图中某个位置的高度...接着用读取的高度数据构造地形网格: float Terrain::getHeight(BYTE *pHeightMap, int px, int pz) { int x = px %...result[0]=n[0]/2; result[1]=n[1]/2; result[2]=n[2]/2; } getHeight方法根据网格的xz坐标获取对应高度...curPlanar++; } } 此方法用于构造地形网格数据以及网格平面数据,其中的MAP_SIZE是地图的宽度与高度...cy=-ny; } return cy; } 其中cx与cz是输入的xz坐标值,scale是xz方向的缩放大小,scaleY是y方向的缩放大小,最终的结果即使地形上的高度值

5522 0

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

document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高...：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth...： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth...Window对象的innerHeight属性包含当前窗口的内部高度。 Document对象的body属性对应HTML文档的标签。...（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

8.1K3 0

JavaScript、Jquery获取屏幕的宽度和高度

在日常的项目中经常需要获取屏幕的宽度或者高度，简单记录一下： Javascript方法获取： document.body.clientWidth //网页可见区域宽 document.body.clientHeight...document.body.scrollLeft //网页被卷去的左 window.screenTop //网页正文部分上 window.screenLeft //网页正文部分左 window.screen.height //屏幕分辨率的高...window.screen.width //屏幕分辨率的宽 window.screen.availHeight //屏幕可用工作区高度 window.screen.availWidth //屏幕可用工作区宽度...JQuery方法获取： ($(window).height()); //浏览器当前窗口可视区域高度 ($(document).height()); //浏览器当前窗口文档的高度 ($(document.body...).height());//浏览器当前窗口文档body的高度 ($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding

5.3K0 0

JS获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度（转）

document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高...：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度...： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度...Window对象的innerHeight属性包含当前窗口的内部高度。 Document对象的body属性对应HTML文档的标签。...（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

16.2K1 0

js获取各种高度总结

在写js的时候偶尔需要获取各种高度，比如；浏览器高度，页面高度，滚动高度等。抽空整理了我自己常用到的，时间仓促，没有考虑到万恶的IE浏览器。。。。...获取屏幕的高度和宽度（屏幕分辨率）： window.screen.height window.screen.width 获取屏幕工作区域的高度和宽度（去掉状态栏）： window.screen.availHeight...window.screen.availWidth 网页全文的高度和宽度： document.body.scrollHeight document.body.scrollWidth 滚动条卷上去的高度和向右卷的宽度...： document.body.scrollTop document.body.scrollLeft 网页可见区域的高度和宽度（不加边线）： document.body.clientHeight document.body.clientWidth...网页可见区域的高度和宽度（加边线）： document.body.offsetHeight document.body.offsetWidth

12.6K2 0

解决height:100vh超出屏幕高度的问题

( 只看有关的代码哦 ) // 此处使用stylus书写样式 .evaluation // 最外边的div width 100% height 100vh // 高度为屏幕的高度 padding-top...background #ffffff color #444444 font-size 0.32rem border-bottom 1px solid #cccccc 因为内容并没有占满整个屏幕..., 所以设置 height : 100vh 本来可以占满屏幕 , 但它会默认将头部和底部也加进去了 , 所以会超出屏幕高度 , 那怎么解决呢 ?....evaluation // 最外边的div width 100% min-height: calc(100vh - 0.9rem) //这个页面只有头部,所以将头部的高度减去 padding-top

4.1K1 0

微信小程序-自动适配屏幕高度和宽度

miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html wx.getSystemInfo(Object object) 可获取系统信息，屏幕的高度和可使用的高度以及宽度...小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw 小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh 所以，我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局...实例代码，需要2个view元素在屏幕中间高度各占比47%，宽度98%； .header { witdh: 98%; height: 47vh; }

11.8K4 1

bootstrap 表格插件bootstrap-table的js设置高度及高度自适应

用js控制bootstrapTable的高度有几种方法 1、 ...$(window).height() - 120 }); 两者的区别是table元素中第二种方法是含有data-toggle="table" 及data-height="350",js...，当内容的高度大于窗口的高度就有滚动条，当内容的高度小于窗口的高度，container的高度设置为内容的高度完整的js如下： $(document).ready(function() { //...设置bootstrapTable起始的高度 $('#tableTest1').bootstrapTable({ height: $(window).height() - 120 });...//当表格内容的高度小于外面容器的高度，容器的高度设置为内容的高度，相反时容器设置为窗口的高度-160 if ($(".fixed-table-body table").height() < $

21.7K2 0

js网页如何获取手机屏幕宽度

document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高...：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth

10.9K3 0

node.js 读取文件目录下的所有文件，JS读取文件目录

文件目录结构如下图：代码1.js：进入test目录：进入ch目录： 1.js: var fs = require('fs'); var join = require('path').join;

14.2K3 0

Android 获取屏幕高宽度，密度，通知栏高度，截图等常用方法

https://blog.csdn.net/lyhhj/article/details/49105255 分享一下Android中常用的一些辅助方法：获取屏幕高度： /** * 获得屏幕高度...： /** * 获得屏幕宽度 * @param context * @return * by Hankkin at:2015-10-07 21:16:13...final float scale = getScreenDensity(context); return (int) (px * scale + 0.5); } 获取状态栏高度...： /** * 获得状态栏的高度 * @param context * @return * by Hankkin at:2015-10-07 21:16:43...： /** * 获取当前屏幕截图，包含状态栏 * @param activity * @return * by Hankkin at:2015-10-07 21

2.2K2 1

【Android 屏幕适配】屏幕适配通用解决方案 ③ ( 自定义组件解决方案 | 获取设备状态栏高度 | 获取设备屏幕数据 )

文章目录一、获取设备状态栏高度二、获取设备屏幕数据参考文档 : 设备兼容性概览屏幕兼容性概览支持不同的像素密度声明受限屏幕支持上一篇博客【Android 屏幕适配】屏幕适配通用解决方案...布局 , 需要完成如下操作 : 首先 , 要获取到实际的设备屏幕数据 , 如手机屏幕实际宽高 , 屏幕像素密度 DPI 等数据 ; 然后 , 计算实际设备的宽高 , 扣掉状态栏的高度 , 不同手机设备状态栏高度不同...; 通过 DisplayMetrics # heightPixels 可以获取屏幕高度 , 通过 DisplayMetrics # widthPixels 可以获取屏幕宽度 ; DisplayMetrics...如果是横屏 , 在宽度方向上减去状态栏高度 , 如果是竖屏 , 在高度上减去状态栏高度 ; 这里通过对比屏幕的宽高来判定当前是横屏还是竖屏 ; // 在屏幕真实宽高上减去状态栏高度...//获取状态框信息 int statusBarHeight = getDimenValue(context,48); // 在屏幕真实宽高上减去状态栏高度

9781 0

js读取本地json_vue读取本地json文件

"name": "wangwu", "age": 17 } ] } 第二步：编写nodejs服务程序 F:\nodejs\express.js...console.log(req.body); //获取请求参数 var file = path.join(__dirname, 'data/test.json'); //文件路径，__dirname为当前运行js...文件的目录 //var file = 'f:\\nodejs\\data\\test.json'; //也可以用这种方式指定路径 //读取json文件 fs.readFile(file, 'utf-8'..., function(err, data) { if (err) { res.send('文件读取失败'); } else { res.send(data); } }); }); var hostName

13.1K3 0

【JS】577- CSS + JS 送学妹满屏幕小爱心

午饭时间，暗恋已久的学妹拉着我的衣袖：“学长学长，你能不能让这些爱心变成五颜六色的吗~”。我在旁边笑开了花~~~

1.5K3 0

js读取本地json文件_jquery读取本地json文件

sex":"男", "email":"lisi@123.com" }, { "name":"王五", "sex":"女", "email":"wangwu@123.com" } ] 2.js...读取json文件 window.onload = function () { var url = "demo.json"/*json文件url，本地的就写本地的位置

21.6K5 0

用JS读取XML的例子

用JS读取XML的例子由 Ghostzhang 发表于 2006-03-21 01:27 刚开始学XMLHTTP，试写的一个读取XML的JS脚本，没什么技术含量，主要用来读取一个类似于通讯录的XML...= ""){ url += escape(text); doSearch(url); } } //读取XML文件 function parseResults(){ var results...= ""; return WDiv; } https://gist.github.com/ghostzhang/8cf9cd79abad75599e2d#file-xmlhttp-js

4.4K1 0

js中读取解析json数据

在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键。...str.parseJSON(); //由JSON字符串转换为JSON对象或者 var obj = JSON.parse(str); //由JSON字符串转换为JSON对象然后，就可以这样读取...cxh1","sex":"man1"}]'; var obj = str.parseJSON(); alert(obj[0].name) 留心：上面的多个要领中，除了eval()函数是js...自带的之外，其他的多个要领都来自json.js包。

14K3 0

js获得浏览器高度和宽度参数

："+ 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();...对象宽度加上Margin宽） document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）而如果没有定义W3C的标准，则...==> 页面对象高度（即BODY对象高度加上Margin高） //获取滚动条的高度 function getPageScroll(){ var yScroll; if (self.pageYOffset

6.1K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭