js中,有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
document.documentElement.clientWidth
document.body.clientWidth
window.innerWidth > document.body.clientWidth = document.documentElement.clientWidth
(大几个像素而已)
(远远大于)
实用的 JavaScript 方案(涵盖所有浏览器):
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
$(window).width();
$(document).height(); 整个网页文档流
$(document).width();
文档内容有滚动条:$(document).height() >> $(window).height();
height()
innerWidth() 返回元素的宽度、高度(包括内边距)。
innerHeight()
outerWidth() 方法返回元素的宽度、高度(包括内边距和边框)
outerHeight()
outerWidth(true) 方法返回元素的宽度、高度(包括内边距、边框和外边距)。
outerHeight(true)
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:(不支持window.innerHeight和window.innerWidth属性)
document.documentElement.clientHeightdocument.documentElement.clientWidth
或者
document.body.clientHeightdocument.body.clientWidth
文档内容无滚动条:
document.body.clientHeight = window.innerHeight = document.documentElement.clientHeight;window.innerWidth > document.body.clientWidth = document.documentElement.clientWidth
(大几个像素而已)
文档内容有滚动条:
document.body.clientHeight >> window.innerHeight = document.documentElement.clientHeight;(远远大于)
实用的 JavaScript 方案(涵盖所有浏览器):
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
jQuery中
$(window).height(); 浏览器显示网页内容的部分$(window).width();
$(document).height(); 整个网页文档流
$(document).width();
文档内容有滚动条:$(document).height() >> $(window).height();
jQuery 尺寸方法,返回不包括单位,
width() 方法设置或返回元素的宽度、高度(不包括内边距、边框或外边距)。height()
innerWidth() 返回元素的宽度、高度(包括内边距)。
innerHeight()
outerWidth() 方法返回元素的宽度、高度(包括内边距和边框)
outerHeight()
outerWidth(true) 方法返回元素的宽度、高度(包括内边距、边框和外边距)。
outerHeight(true)
<div style="height:100px;width:300px ;padding:10px; margin:3px; border:1px solid blue"></div>
$("div").width(): 300$("div").height(): 100
$("div").innerWidth()(): 320
$("div").innerHeight(): 120
$("div").outerWidth(): 322
$("div").outerHeight(): 122
$("div").outerWidth(true): 328
$("div").outerHeight(true): 128