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


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

      先来列举下这几个吧:

      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:用来显示浏览器的屏幕的可用宽度

          

      

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

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

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

      

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

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

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

        

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

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

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

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

  • 相关阅读:
    [转] JS报 “尚未实现” 错误
    分享到国内各SNS网站的代码
    IE8以下版本不支持动态创建的HTML5元素?
    一个较为个性化的出生日期选择
    关于拖拽上传 [一个拖拽上传修改头像的流程]
    用CSS写出漂亮的小三角
    用户自定义模块的实现方案
    纪录一则IE的bug
    onpropertychange 和 oninput
    判断脚本加载完毕
  • 原文地址:https://www.cnblogs.com/jf-67/p/7615946.html
Copyright © 2020-2023  润新知