文档章节

纯Javascript获取各种屏幕的宽度和高度

一点灵犀
 一点灵犀
发布于 2015/03/06 17:27
字数 303
阅读 11
收藏 0

读取基本宽高值:

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

以上值不能完全读取浏览器窗口的实际尺寸,尤其是高度,以下是更准确的方案:

function findDimensions() { //函数:获取尺寸
  var winWidth = 0, winHeight = 0;
  // 获取窗口宽度
  if (window.innerWidth)
    winWidth = window.innerWidth;
  else if ((document.body) && (document.body.clientWidth))
    winWidth = document.body.clientWidth;
  // 获取窗口高度
  if (window.innerHeight)
    winHeight = window.innerHeight;
  else if ((document.body) && (document.body.clientHeight))
    winHeight = document.body.clientHeight;

  // 通过深入Document内部对body进行检测,获取窗口大小
  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
  }
  // 结果输出至浮动框
  document.getElementById("info").innerHTML = winWidth + " " + winHeight;
}

参考来源:

本文转载自:

一点灵犀

一点灵犀

粉丝 11
博文 53
码字总数 15777
作品 1
深圳
程序员
私信 提问
自适应浏览器高度和宽度+字体大小 JS(主要针对Java后端>>全栈工程师)

自适应浏览器高度和宽度+字体大小有点: 1.能自动判断当前浏览器的高度和宽度(页面里面设置均百分比宽度) 2.JS里面自己设置字体大小,在不同分辨率下显示不一样的字体 3.在浏览器最大化时候...

RGB_俞子轩
2018/06/29
0
0
DOCTYPE声明对JS获取窗口宽度和高度的影响

摘注】:以下说法不准确,不是有没有DOCTYPE声明,而是不同的DOCTYPE声明对js的处理有影响。 在没有DOCTYPE声明的情况下: document.body.clientWidth document.body.clientHeight 为当前窗口...

囧南风囧
2010/09/25
0
0
第124天:移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中 > 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一、基本的轮播图实现 HT...

半指温柔乐
2017/12/24
0
0
一个实用的js window封装类

发布一个实用的js window封装类,主要内容包括: 1.获取屏幕宽度的函数 2.获取屏幕高度的函数 3.获取滚动条横向宽度 4.获取滚动条竖向高度 5.window.onscroll绑定事件 6.删除window.onscroll...

黄献
2012/11/04
0
0
Javascript--获取一个元素的高度和宽度

纯Javascript脚本获取元素样式 一,问题描述 有时候,我们需要做一些页面让其中的元素按照不同的显示器而自适应, 那么怎么计算这个元素的margin-top呢,我相信大家都会计算, 那么涉及到其中...

ifanjiaxin
2015/10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker搭建Mysql集群、主从同步复制

1、创建数据挂载点: mkdir /opt/mysql-master/mysql、/opt/mysql-master/conf.d、/opt/mysql-slave/conf.d、/opt/mysql-slave/conf.d 2、分别在master、slave节点文件目录conf.d下创建touch......

WALK_MAN
22分钟前
2
0
手把手教你做中间件开发(分布式缓存篇)-借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo

本文档配合主要对如下demo进行配合说明: 借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo 0. 手把手教你做中间件、高性能服务器、分布式存储技术交流群 ...

y123456yz
23分钟前
1
0
阿里技术男的成长史:越想证明自己死得越快……

在上海工作8年后,身为部门经理的钱磊,管理着一家ERP公司的百十来号员工,“再往上爬就是老板和他儿子了……从这个领域的技术角度来讲算是做到了顶。”05年,钱磊就开始关注一家名字奇怪,做...

阿里云云栖社区
27分钟前
2
0
Spring-boot单元测试(私有方法测试)

Spring-boot的单元测试网上有了很多,当项目是可以使用spring-boot正常运行时,只要在测试类上添加如下配置就使用@Autowired的方式进行单元测试 @RunWith(SpringJUnit4ClassRunner.class)@...

琴兽
44分钟前
1
0
spring cloud(第一部)框架概述

关于微服务 近几年,'微服务'这个词越来越多的被身边的人所提及,到底什么是微服务,为什么微服务总是伴随着spring cloud被人们所提及,这里笔者结合多年的技术经历跟大家分享下自己的理解:...

白中墨
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部