📅  最后修改于: 2023-12-03 15:28:33.126000             🧑  作者: Mango
在Web开发中,我们常常需要获取屏幕的大小以便根据不同的分辨率调整页面布局或响应式设计。在Javascript中,我们可以使用以下代码获取屏幕的大小:
let screenWidth = window.screen.width; // 屏幕宽度
let screenHeight = window.screen.height; // 屏幕高度
以上代码利用了window
对象的screen
属性,其中screenWidth
和screenHeight
分别表示屏幕的宽度和高度,单位为像素(px)。
另外,如果需要获取浏览器的大小,可以使用以下代码:
let browserWidth = window.innerWidth; // 浏览器宽度
let browserHeight = window.innerHeight; // 浏览器高度
以上代码利用了window
对象的innerWidth
和innerHeight
属性,其中browserWidth
和browserHeight
分别表示浏览器的宽度和高度,单位同样为像素(px)。需要注意的是,浏览器大小不考虑地址栏、工具栏等元素的高度,因此可能会与屏幕大小不完全一致。
最后,如果需要获取屏幕或浏览器的可用大小(即去除了窗口边框、标题栏、滚动条等元素之后的大小),可以使用以下代码:
let availableScreenWidth = window.screen.availWidth; // 屏幕可用宽度
let availableScreenHeight = window.screen.availHeight; // 屏幕可用高度
let availableBrowserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // 浏览器可用宽度
let availableBrowserHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 浏览器可用高度
以上代码中,availableScreenWidth
和availableScreenHeight
分别表示屏幕的可用宽度和高度,而availableBrowserWidth
和availableBrowserHeight
分别表示浏览器的可用宽度和高度。需要注意的是,availableBrowserWidth
和availableBrowserHeight
的值可能存在浏览器兼容性问题,因此需要按照上述代码中的方式获取。