文档章节

window和screen的尺寸总结

FeanLau
 FeanLau
发布于 2017/06/03 12:49
字数 1163
阅读 69
收藏 0

#尺寸总结

windowscreen 相关

输入图片说明

window

  • window.innerWidth:视口的宽。
  • window.innerHeight:视口的高。
  • window.outerWidth:浏览器窗口的宽。
  • window.outerHeight:浏览器窗口的高。

兼容性,这四个属性在 IE9 及以上才支持。

###screen

  • screen.width:屏幕的宽。
  • screen.height:屏幕的高。
  • screen.availWidth:可利用的宽,等于屏幕的宽。
  • screen.availHeight:可利用的高,等于屏幕的高减去 mac 顶部栏或 windows 底部栏。
  • screenTop:浏览器窗口左上角到屏幕上边缘的距离。
  • screenLeft:浏览器窗口左上角到屏幕左边缘的距离。
  • screenX:等于 screenLeft
  • screenY:等于 screenY

没有兼容性问题。

###元素相关

client-*

  • Element.prototype.clientWidth
  • 如果元素没有设置宽:宽由内部元素决定或者块级元素的宽会占满父元素。
  • 如果有滚动条
    • clientWidth = 元素宽 + padding(左右) - 滚动条
  • 如果没有滚动条
    • clientWidth = 元素宽 + padding(左右)
  • Element.prototype.clientHeight
  • clientWidth 区别是没有设置高时仅由内部元素决定。
  • Element.prototype.clientTop
  • 等于 border-top
  • Element.prototype.clientLeft
  • 等于 border-left

没有兼容性问题,各个浏览器表现一致。但是要注意 mac 和 windows 下滚动条策略不同,windows 下默认有滚动条,而 mac 下只有滚动时才有滚动条。

offset-*

  • HTMLElement.prototype.offsetWidth
  • 如果元素没有设置宽:宽由内部元素决定或者块级元素的宽会占满父元素。
  • offsetWidth = 元素宽 + padding(左右)+ border(左右)
  • HTMLElement.prototype.offsetHeight
  • offsetWidth 区别是没有设置高时仅由内部元素决定。
  • HTMLElement.prototype.offsetParent
  • offsetParent 是该元素父元素中最近的定位元素。
  • 注意很多书上讲没有定位的父元素,就以 body 来计算,这是错误的,应该是以 documentElement 来计算。本质上来看 documentElement 也是父级元素,并没有违反上面一条规则。
  • HTMLElement.prototype.offsetTop
  • 当前元素内容区域(包括border)顶部到 offsetParent 内容区域(不包括border)顶部的距离。
  • HTMLElement.prototype.offsetLeft
  • 当前元素内容区域(包括border)左边缘到 offsetParent 内容区域(不包括border)左边缘的距离。

offsetWidthoffsetHeight 基本没有什么兼容性问题,而 offsetTopoffsetLeft 在不同浏览器下的表现不太一样。但是测试了新的 chrome、fireFox 是一样的,都是上面所说的规则。

scroll-*

  • Element.prototype.scrollWidth
  • 如果元素没有设置宽:宽由内部元素决定或者块级元素的宽会占满父元素。
  • 内容区域小于元素的宽高时,等于 clientWidth
  • 内容区域大于元素的宽高时,等于实际内容的宽度 + padding(两部分)。
  • Element.prototype.scrollHeight
  • Element.prototype.scrollTop
  • 可读写
  • Element.prototype.scrollLeft
  • 可读写

两个特殊的元素 docmuentElementbody

  • document.documentElement.clientWidth 始终为视口的宽。
  • document.documentElement.clientHeight 始终为视口的高。
  • document.documentElement.offsetWidth 始终为视口的宽度。
  • document.documentElement.offsetHeight 高度由内部元素撑起。
  • document.body.clientWidth 没有宽则根据 documentElement 减去 marginborder 计算,有宽则直接拿来计算。
  • document.body.clientHeight 没有宽则根据内部元素撑起的高度进行计算,有高则直接拿来计算。
  • document.body.offsetWidth 没有宽则根据 documentElement 减去 margin 计算,有宽则直接拿来计算。
  • document.body.offsetHeight 没有宽则根据内部元素撑起的高度进行计算,有高则直接拿来计算。
  • document.body.scrollWidth
  • document.body.scrollHeight

规则:(注意下面的规则对于的宽高是独立的)

  1. 当给定的宽高小于视口的宽高则返回的是视口的宽高。(fireFox 下直接进入 2、3 两个判断)
  2. 当给定的宽高大于视口的宽高,并且内容区域小于给定的宽高,也就是没有滚动条出现,则返回的是给定的宽高加上对应的 margin、padding、border。
  3. 当给定的宽高大于视口的宽高,并且内容区域大于给定的宽高,也就是有滚动条出现,则返回的是内容区域的宽高加上对应的 margin、padding、border。
  • document.documentElement.scrollWidth
  • document.documentElement.scrollHeight

规则:

  1. 当 body 的 scrollHeight 小于视口的高则返回的是视口的高。
  2. 当 body 的 scrollHeight 大于视口的高则返回的是 body 的 scrollHeight
  3. 宽的话始终等于视口的宽。

在 fireFox 和 chrome 表现不一致,上面写到的都是 chrome 中的规则。

获取视口大小的兼容性写法

本来按上面写的 document.documentElement.clientWidth 才是正确的,这么做主要是为了兼容低版本浏览器或者没有加 doctype 的一些情况:

let w = document.documentElement.clientWidth || document.body.clientWidth
let h = document.documentElement.clientHeight || document.body.clientHeight

Event 的五个坐标

  • clientXclientY 相对于视口。
  • screenXscreenY 相对于屏幕。
  • offsetXoffsetY 相对于事件源。
  • pageXpageY 相对于页面。
  • XY 相对于 Css 动态定位最内层的包容元素。(chrome 中等于 clientXclientY,IE 下默认等于 clientXclientY,但是设置了 position 则和 offsetXoffsetY 相等)

© 著作权归作者所有

FeanLau
粉丝 4
博文 249
码字总数 148416
作品 0
浦东
程序员
私信 提问
尺寸1

屏幕尺寸(与设备分辨率) 让我们来关注一些实际的尺寸,首先先从 screen.width 与 screen.height 说起。即用户屏幕的高度与宽度。我们用设备像素来描述这一尺寸,因为其永远不会变化:注意这...

金于虎
2016/10/27
7
0
android 弹出软键盘属性windowSoftInputMode

一、简介 软件盘设置,会以下面两种方式影响屏幕的显示 1、设置为“可见”或者“不可见” stateUnchanged、stateHidden、stateAlwaysHidden、stateVisible、stateAlwaysVisible 2、软键盘的展...

风中女程序员
2014/11/26
95
1
媒体查询iphone4,5,6以及更高

-------------------------------------------安卓适配 开始------------------------------------------ 关于安卓机的移动端设备适配问题? 安卓机设备众多,在网上也不太容易知道此设备的长...

柴高八斗之父
2017/07/17
80
0
快速修改程序支持iphone5

今天iphone5已经开卖,昨天ios6也已经更新,sdk模拟器已经可以测试iphone5 4英寸的屏幕。 如何修改程序支持iphone5. 1.首先xcode更新到4.5。 2.添加一张Retina(4-inch)启动画面的图片,大小为...

vane_
2013/05/11
629
0
使用rem实现移动端适配的简单方法

使用rem适配已经快一年了,感觉还是不错的,在这里记录一下。 1.原理 rem是一个相对单位,相对的是根元素‘html’的字号。比如html的font-size:100px;那么1rem=100px;html的font-size:120px...

小尾巴儿
2016/11/04
341
0

没有更多内容

加载失败,请刷新页面

加载更多

Java FOR-EACH循环

FOR-EACH循环使得代码更加的简短,也让代码更加易懂,其实他并没有加入什么新的功能。他的功能完全可以用简单的FOR循环代替。 for-each的用法: int a[] = {1,2,3,4,5,6} for(int s:a){ Syst...

无名氏的程序员
34分钟前
3
0
使用HTML5的History API

本文转载于:专业的前端网站➣使用HTML5的History API   HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代...

前端老手
36分钟前
4
0
JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
今天
7
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
今天
102
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部