本篇主要介绍Web环境中屏幕、浏览器及页面的高度、宽度信息。

目录

1. 介绍:介绍页面的容器(屏幕、浏览器及页面)、物理尺寸与分辨率、展示等内容。

2. 屏幕信息:介绍屏幕尺寸信息;如:屏幕、软件可用以及任务栏的高度和宽度。

3. 浏览器信息:介绍浏览器尺寸信息;如:浏览器、内部页面以及工具栏的高度和宽度。

4. 页面信息:介绍HTML页面尺寸信息;如:body总的、展示的高度和宽度。

一、介绍

1. 容器

一个页面的展示,从外到内的容器为:屏幕、浏览器以及页面本身。

HTML元素展现在页面内,页面展现在浏览器内,而浏览器展现在屏幕内。

通过Js的一些对象可以获取这些容器的高度、宽度。

2. 物理尺寸和分辨率

容器的尺寸是指当前分辨率下的高度、宽度,而不是物理高度、宽度。

如:一个22寸的显示器,屏幕分辨率为1366 * 768,那么获取到的屏幕高度为1366px,宽度为768px。

3. 展示图

二、屏幕信息

screen.height :屏幕高度。

screen.width :屏幕宽度。

screen.availHeight :屏幕可用高度。即屏幕高度减去上下任务栏后的高度,可表示为软件最大化时的高度。

screen.availWidth :屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度,可表示为软件最大化时的宽度。

任务栏高/宽度 :可通过屏幕高/宽度 减去 屏幕可用高/宽度得出。如:任务栏高度 = screen.height - screen.availHeight 。

三、浏览器信息

window.outerHeight :浏览器高度。

window.outerWidth :浏览器宽度。

window.innerHeight :浏览器内页面可用高度;此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。

window.innerWidth :浏览器内页面可用宽度;此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

工具栏高/宽度 :包含了地址栏、书签栏、浏览器边框等范围。如:高度,可通过浏览器高度 - 页面可用高度得出,即:window.outerHeight - window.innerHeight。

四、页面信息

body.offsetHeight :body总高度。

body.offsetWidth :body总宽度。

body.clientHeight :body展示的高度;表示body在浏览器内显示的区域高度。

body.clientWidth :body展示的宽度;表示body在浏览器内显示的区域宽度。

滚动条高度/宽度 :如高度,可通过浏览器内页面可用高度 - body展示高度得出,即window.innerHeight - body.clientHeight。

[转] HTML 获取屏幕、浏览器、页面的高度宽度的更多相关文章

  1. JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_

    JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...

  2. HTML 获取屏幕、浏览器、页面的高度宽度

    本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可 ...

  3. JavaScript获取屏幕和页面的宽度和高度

    JavaScript获取屏幕和页面的宽度和高度 1.设计源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  4. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  5. Js动态获取iframe子页面的高度总结

    问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置 ...

  6. Uipath 获取当前浏览器页面URL

    文章来源东京IT青年前线 http://www.rpatokyo.com   Uipath 获取当前浏览器页面URL的方法 Inject Js Script   因为目前没有直接获取页面URL的Act ...

  7. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

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

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

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

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

随机推荐

  1. 【大数据】Sqoop学习笔记

    第1章 Sqoop简介 Sqoop是一款开源的工具,主要用于在Hadoop(Hive)与传统的数据库(mysql.postgresql...)间进行数据的传递,可以将一个关系型数据库(例如 : MyS ...

  2. docker--从仓库下载镜像到推送自己的项目到仓库步骤详解

    怎样从仓库下载的镜像,变成容器,并在容器中制作项目,再将容器变成镜像,然后将镜像推送到仓库? 一:从官网下载镜像 官方的https://hub.docker.com/提供了数十万个镜像提供大家下载 以 ...

  3. BZOJ 4873 [Shoi2017]寿司餐厅 | 网络流 最大权闭合子图

    链接 BZOJ 4873 题解 当年的省选题--还记得蒟蒻的我Day1 20分滚粗-- 这道题是个最大权闭合子图的套路题.严重怀疑出题人就是先画好了图然后照着图编了个3000字的题面.和我喜欢的妹子当 ...

  4. 李建20181029课时整理(NOIP考点)

    历年真题 数学题: 数论(exgcd 逆元,CRT,EXCRT,快速幂,线性筛 ,杜教筛)排列组合 概率期望(什么东西) C(n,m) = 逆元? 分解质因数? Ti(大质数的类似物)思考技巧分解质因 ...

  5. SP422 TRANSP2 - Transposing is Even More Fun——置换群+反演

    挺神仙的置换题 SP422 TRANSP2 - Transposing is Even More Fun 这个博客除了开始举例子别的都是对的: https://blog.csdn.net/Braket ...

  6. C#基础概念

    1.     面向对象的思想主要包括:继承 多态 封装 ●       封装:用抽象的数据类型将数据和基于数据的操作封装在一起,数据被保护在抽象数据类型内部. ●       继承:子类拥有父类的所有 ...

  7. Linux makefile讲解

    博客不会讲解的太细致深入,推荐先看视频再看博客 视频链接,推荐去B站观看,B站比较清晰... 土豆网:http://www.tudou.com/programs/view/19VZ0f3b_I0 B站 ...

  8. SQL记录-PLSQL函数

    PL/SQL函数 PL/SQL函数与过程相同,不同之处在于函数有一个返回值.因此,前面的章节中的所有讨论都适用于函数. 创建函数 建立一个独立函数可以使用CREATE FUNCTION语句创建.CRE ...

  9. 谷歌AMP和百度MIP是什么鬼?

    首先我们来看定义: 谷歌AMP(Accelerated Mobile Pages,加速移动页面)是Google推出的一种为静态内容构建 web 页面,提供可靠和快速的渲染,加快页面加载的时间,特别是在 ...

  10. shape-outside 矩形之外的另一种思路

    http://docs.webplatform.org/wiki/css/properties/shape-outside