首页 技术 正文
技术 2022年11月14日
0 收藏 570 点赞 4,317 浏览 894 个字

  经常会遇到需要获取屏幕宽度、高度,可视区域宽度、高度等问题,也就常跟这几个打交道,一不小心,还真爱弄混淆了。

  先来列举下这几个吧:

  screen.availHeight、screen.availWidth;

  screen.height、screen.width;

  document.documentElement.clientWidth、document.documentElement.clientHeight;

  window.innerWidth、window.innerHeight。

  (1)、screen.availHeight与screen.availWidth。

  screen.availHeight:用来显示浏览器的屏幕的可用高度,即不包含window任务栏的高度(如下图所示)。

  screen.availWidth:用来显示浏览器的屏幕的可用宽度。

      获取屏幕宽高度与可视区域宽高度(availWidth、clientWidth、width、innerWidth)

  

  (2)、screen.height与screen.width。

  screen.height:用来获取屏幕总高度,包括window任务栏的高度,即获取屏幕分辨率的高度。

  screen.width:用来获取屏幕总宽度,即获取屏幕分辨率的宽度。

  

  (3)、document.documentElement.clientWidth与document.documentElement.clientHeight

  document.documentElement.clientWidth:用来返回文档可视区域的宽度

  document.documentElement.clientHeight:用来返回文档可视区域的高度(不包含浏览器顶部的标签栏等)。如下图所示

    获取屏幕宽高度与可视区域宽高度(availWidth、clientWidth、width、innerWidth)

  (4)、window.innerWidth与window.innerHeight。

  window.innerWidth:返回窗口的文档显示区的宽度(IE8及以下版本不支持)

  window.innerHeight:返回窗口的文档显示区的高度(IE8及以下版本不支持)

  (3)、(4)两种情况呢,其实作用是一样的

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,105
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,582
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,429
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,200
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,836
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,919