在HTML页面中,通过JavaScript代码访问 window 对象,能够获取到很多表征屏幕大小的信息,下面列举并加以区分。

window 对象中的屏幕信息

window.innerheight、 window.innerwidth

  • 只读属性,以像素计
  • 浏览器窗口的文档显示区的高度和宽度
  • 不包括菜单栏、工具栏以及滚动条等的高度
  • IE8以下不支持这些属性,用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代

window.outerheight、 window.outerwidth

  • 只读属性,以像素计
  • 整个浏览器窗口的高度和宽度
  • 常用于设置 window.open 打开的窗口宽度和高度
  • IE8以下不支持此属性,且没有提供替代的属性

window.screenLeft、 window.screenTop、 swindow.creenX、 window.screenY

  • 只读属性,整数
  • 浏览器窗口的左上角在屏幕上的的 x 坐标和 y 坐标
  • IE、Safari 和 Opera 支持 screenLeft 和 screenTop
  • Firefox 和 Safari 支持 screenX 和 screenY

window.screen.availHeight、 window.screen.availHeightavailWidth

  • 以像素计
  • 浏览器的屏幕的可用高度和宽度
  • Windows中不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间

window.screen.height、 window.screen.width

  • 以像素计
  • 显示器屏幕的高度和宽度
  • 调整显示设备的分辨率会发生变化
  • 少部分移动设备上面的值并不是真正的显示屏大小,如三星S8

document 对象中的屏幕信息

很复杂!真的很复杂!这些值根据是否指定 DOCTYPEIE 、网页是否超过窗口宽度 有关系。而且FireFox,Chrome这些主流浏览器里面针对元素的 clientWidth、 offsetWidth、 scrollWidth信息技术都有各自的标准。下面简单说明作为参考。详细新在实际应用中进行调整。

下面的 document.body 和 document.documentElement 类似,body也是一个DOM element。

document.body.clientHeight、 document.body.clientWidth

  • 浏览器中可显示内容区域的高度和宽度
  • document.documentElement 表示元素的可见高度和宽度
  • 与页面内容多少无关
  • 滚动条不算在内,padding算在内
  • clientHeight = topPadding + bottomPadding+ height - scrollbar.height

document.body.offsetHeight、 document.body.offsetWidth

  • 包括边线的网页内容可见区域高度和宽度
  • offsetHeight = clientHeight + 滚动条 + 边框

document.body.scrollHeight、 document.body.scrollWidth

  • 网页正文全文高度和宽度
  • 不同的浏览器中 scrollHeight 和 clientHeight 的大小关系不一样

解决方案

可以使用下面的方式折中取 scrollWidth 和 clientWidth :

var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

下面列举通用HTML元素 element 的大小属性信息:

  • element.clientHeight : 元素的可见高度
  • element.clientWidth : 元素的可见宽度
  • element.offsetHeight : 元素的高度
  • element.offsetWidth : 元素的宽度
  • element.offsetLeft : 元素的水平偏移位置
  • element.offsetTop : 元素的垂直偏移位置
  • element.offsetParent : 元素的偏移容器
  • element.scrollHeight : 元素的整体高度
  • element.scrollLeft : 元素左边缘与视图之间的距离
  • element.scrollTop : 元素上边缘与视图之间的距离
  • element.scrollWidth : 元素的整体宽度

由于本人才疏学浅,不乏遗漏错误,欢迎大家指出。

原文出处:http://uusama.com/496.html

HTML页面中JavaScript能获取到的各种屏幕大小信息的更多相关文章

  1. vue中如何让多个echarts随屏幕大小变化

    在vue项目中使用Echarts  一般window.onsize在页面中只能存在一个. 如何在一个页面中多个echarts使用window.onresize?    myChart 可以放在Data ...

  2. vue2.0 在页面中使用process获取全局路径的时候 报错 process is not defined

    如果是刚配置好的全局变量需要 重新启动一下vue才能通过proccess.env.xxx 获取到 如果想在html中使用 需要在data中声明一个变量 然后在vue生命周期中 将process.env ...

  3. 在页面跳转的时候,在跳转后的页面中使用js 获取到 页面跳转的url中携带的参数。

    common.js代码 //获取URL中的参数..等等function getQueryString(name){var reg = new RegExp("(^|&)"+ ...

  4. Android原生代码拦截H5 Web页面中JavaScript弹窗/弹框

    <html> <body> <script> function showAlert(){ alert("JavaScript - hello , worl ...

  5. 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

    来自   https://blog.csdn.net/u011088260/article/details/79563315   最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...

  6. GetConsoleScreenBufferInfo 函数--获取控制台屏幕缓冲区信息

    GetConsoleScreenBufferInfo函数 来源:https://msdn.microsoft.com/en-us/library/ms683171(v=vs.85).aspx 作用 获 ...

  7. 使用JavaScript设置、获取父子页面中的值

    一:获取父页面中的值 有二种方法windows.open()和windows.showModalDialog() 1.windos.open(URL,name,reatures,replace) 再父 ...

  8. jQuery基础学习5——JavaScript方法获取页面中的元素

    给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  9. 一行JavaScript代码获取页面中的所有超链接地址

    因为我喜欢收集Web开发类的网址,平时对网址就很敏感. 我总结了一下我收集网址的几个阶段: 1.纯手工阶段,傻傻的阶段. 在这个阶段,主要是收集一些在页面中展现出来的网址,就是说,如果网址出现在HTM ...

随机推荐

  1. 想使用Docker容器?先看看这些注意事项

    Docker容器无疑是最近十年来最引人注目的技术之一,因为有了它,对我们思考设计.开发和运维软件的方式产生了非常有益的影响. 但是就像每一个开发工具一样,为了充分利用这些工具,需要注意一些使用中问题, ...

  2. Function Programming - First Class(一等公民function)

    引用外界一等公民的定义:"在JavaScript世界中函数却是一等公民,它不仅拥有一切传统函数的使用方式(声明和调用),而且可以做到像简单值一样赋值.传参.返回,这样的函数也称之为第一级函数 ...

  3. border-radio属性

    boreder-radio属性是css3的新增属性,可以设置圆角的边框. <head>  <style type="text/css"> *{ margin ...

  4. ios2048小游戏

    最近突然想写一个2048的小游戏,由于全部是自定义控件,所以程序看起来冗杂,但是核心的算法部分还是很不错的,大家感兴趣的可以仔细看看. 声明部分: #import <UIKit/UIKit.h& ...

  5. toastr 通知提示插件

    table.sb-tb td,table.sb-tb th { padding: 5px 10px !important } jquery toastr 一款轻量级的通知提示框插件. 网页开发中经常会 ...

  6. spring框架的一些技术总结

    纵观现在互联网行业,java的地位依然不可动摇,因为java拥有着的众多开发人员和适用性广,技术与解决技术大部分开源等特点,因此java依然是众多众多开发行业作为互联网开发的首选,而说到开发,我们就不 ...

  7. HDU2546--饭卡(01背包)

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  8. PhpStorm连接服务器,开始自动上传功能

    连接服务器 菜单栏找到[工具/Tools]->[Deployment/部署]->[Confinguration-/配置-]. 点加号(+),添加一台服务器,填写名称,选择类型为SFTP,点 ...

  9. Angular4.0引入laydate.js日期插件方法

    Angular是不支持直接引入js文件的,下面介绍项目如果引入laydate.js的方法 一.将下载的laydate中的js和theme文件放到一个统一的文件下面,我把它放到asset下 二.在ang ...

  10. 基本MarkDown语法

    引言 字符串作为一种常见的数据类型,在日常中我们面临各式各样的字符串处理问题,那么,这就要求我们必须掌握一些常用的字符串处理函数.本文尽量囊括常用的字符串处理函数,此文也作为个人的小总结. Pytho ...