浏览器大小调整时获得相应的宽高值

来源：互联网发布：网络音箱评测编辑：程序博客网时间：2024/06/11 04:21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title> 请调整浏览器窗口 </title> <meta http-equiv="content-type" content="text/html; charset=gb2312">

</meta></head>

<body>

<h2 align="center"> 请调整浏览器窗口大小 </h2><hr />

浏览器窗口的实际高度 : <input type="text" name="availHeight" size="4"/><br />

浏览器窗口的实际宽度 : <input type="text" name="availWidth" size="4"/><br />

</form>

<!--

var winWidth = 0;
var winHeight = 0;
function findDimensions() // 函数：获取尺寸
{
    // 获取窗口宽度
    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.form1.availHeight.value= winHeight;
    document.form1.availWidth.value= winWidth;
}

findDimensions();

// 调用函数，获取数值
window.onresize=findDimensions;
//-->

</script>

</body>

</html>