获取屏幕、窗口和网页尺寸, 用JavaScript

简介: 本教程介绍了如何使用JavaScript获取屏幕、窗口和网页的尺寸。通过对不同尺寸的定义和访问方法进行解释,帮助读者更好地理解各种尺寸的含义和用途。

牙叔教程 简单易懂


原文 How to Get the Screen, Window, and Web Page Sizes in JavaScript


要检测浏览器窗口是横向模式还是纵向模式,可以比较浏览器窗口的宽度和高度。


但是根据我的经验,在这一系列尺寸中很容易混淆:屏幕、窗口、网页尺寸。


我将在本文中讨论这些尺寸的定义以及如何访问它们。


目录



1. 屏幕


1.1 屏幕大小


屏幕大小 是屏幕(显示器或移动屏幕)的宽度和高度。

window.screen 是保存屏幕尺寸信息的对象。以下是访问屏幕宽度和高度的方法:


const screenWidth = window.screen.width;

const screenHeight = window.screen.height;


1.2 可用屏幕大小


可用屏幕大小 包括活动屏幕的宽度和高度,不包括操作系统工具栏。

要访问可用屏幕大小,可以再次使用 window.screen 对象:


const availScreenWidth = window.screen.availWidth;

const availScreenHeight = window.screen.availHeight;


2. 窗口


2.1 窗口外部大小


窗口外部大小 包括整个浏览器窗口的宽度和高度,包括地址栏、选项卡栏和其他浏览器面板。

要访问外部窗口大小,可以使用 window 对象上直接可用的 outerWidthouterHeight 属性:


const windowOuterWidth = window.outerWidth;

const windowOuterHeight = window.outerHeight;


2.2 窗口内部大小


窗口内部大小 (也称为视口大小)包括显示网页的视口的宽度和高度。

window 对象提供了必要的 innerWidthinnerHeight 属性:


const windowInnerWidth = window.innerWidth;

const windowInnerHeight = window.innerHeight;


如果想访问不带滚动条的窗口内部大小,可以使用以下代码:


const windowInnerWidth = document.documentElement.clientWidth;

const windowInnerHeight = document.documentElement.clientHeight;


3. 网页尺寸


网页尺寸 包括页面内容呈现的宽度和高度。

要访问网页内容的尺寸(包括页面的填充,但不包括边框、外边距或滚动条),可以使用以下代码:


const pageWidth = document.documentElement.scrollWidth;

const pageHeight = document.documentElement.scrollHeight;


如果 pageHeight 大于窗口内部高度,则会显示垂直滚动条。


4. 总结


希望现在您对如何确定不同类型的尺寸有了更好的理解。


屏幕大小 是整个屏幕(或显示器)的大小,而可用屏幕大小 是除去操作系统任务栏或工具栏后的屏幕大小。


窗口外部大小 衡量整个浏览器窗口(包括地址栏、选项卡栏、打开的侧面板),而窗口内部大小 是网页呈现的视口的大小。


最后,网页尺寸是网页及其内容的尺寸。

相关文章
|
5月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
194 56
|
4月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
872 58
|
1月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
634 0
|
4月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
11月前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
516 1
|
12月前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
10月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
351 5
|
11月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
117 1
【JavaScript】网页交互的灵魂舞者