innerWidth
、innerHeight
、outerWidth
、outerHeight
浏览器 | 说明 |
---|---|
IE9+、Safari、Firefox | outerWidth 和outerHeight 返回浏览器窗口本身的尺寸 |
Opera | outerWidth 和outerHeight 返回视图容器的大小,而innerWidth 和innerHeight 表示该容器中页面视图区的大小(减去边框宽度) |
Chrome | outerWidth 和outerHeight 与innerWidth 和innerHeight 返回相同的值,即视口大小而非浏览器窗口大小 |
在IE、Firefox、Safari、Opera和Chrome中,document.documentElement.clientWidth
和document.documentElement.clientHeight
中保存了页面视口的信息。
如果是混杂模式下,需要通过document.body.clientWidth
和document.body.clientHeight
获取页面视口的信息。
下面是获取视口大小的方法示例:
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
alert("Width: " + pageWidth);
alert("Height: " + pageHeight);
resizeTo()
和resizeBy()
resizeTo()
和resizeBy()
方法可以调整浏览器窗口的大小。这两个方法都接收两个参数:
resizeTo()
接收浏览器窗口的新宽度和新高度resizeBy()
接收新窗口与原窗口的宽度和高度之差
例:
// 调整到 100 x 100
window.resizeTo(100, 100);
// 调整到 200 x 150
window.resizeBy(100, 50);