以跨浏览器的方式(没有 Prototype/jQuery)查找视窗的确切高度和宽度

我试图找出浏览器视窗的确切高度和宽度，但我怀疑 Mozilla 或 IE 给了我错误的号码。下面是我的身高测量方法:

var viewportHeight = window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight;

我还没有开始宽度，但我猜它将是类似的东西。

有没有更正确的方法来获取这些信息？理想情况下，我希望这个解决方案也能用于 Safari/Chrome/其他浏览器。

98242 次浏览
小开

我一直使用 document.documentElement.clientHeight/clientWidth，我认为在这种情况下不需要手术室条件。

小开

使用这个提示: http://www.appelsiini.net/projects/viewport或那个代码: http://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using-jquery/

小开
最佳答案

你可以试试这个:

function getViewport() {


var viewPortWidth;
var viewPortHeight;


// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined') {
viewPortWidth = window.innerWidth,
viewPortHeight = window.innerHeight
}


// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0) {
viewPortWidth = document.documentElement.clientWidth,
viewPortHeight = document.documentElement.clientHeight
}


// older versions of IE
else {
viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
}
return [viewPortWidth, viewPortHeight];
}

(http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/)

然而，它甚至不可能在所有浏览器中获得视口信息(例如 IE6在怪异模式下)。但是上面的脚本应该可以做得很好: -)

小开

你可使用简短版本:

<script type="text/javascript">
<!--
function getViewportSize(){
var e = window;
var a = 'inner';
if (!('innerWidth' in window)){
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }
}
//-->
</script>
小开

试试这个

<script type="text/javascript">
function ViewPort()
{
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
var viewsize = w + "," + h;
alert("Your View Port Size is:" + viewsize);
}
</script>

提交答案