Javascript 检测分辨率 在各个浏览器下结果截图

Javascript 能获得分辨率以及各种高度宽度,在Firefox、IE、Chrome浏览器下结果不相同。

总结:屏幕分辨率是可靠的,用window.screen.height + ‘x’ + window.screen.width。

滚动条滚了多少,只有chrome知道。

网页高度是可靠的,用document.body.scrollHeight。

网页宽度不能用document.body.scrollWidth。

浏览器有多宽,IE6不知道,其他浏览器知道。

浏览器有多高,都不知道。

还有一点,IE、Firefox整体放大是模拟小分辨率,1600x900放大125%,js检测到为1280x720。也就是说流量统计中的IE、Firefox分辨率不再可靠。Chrome整体放大后分辨率依然可靠。

在线效果:http://web-developer-tips.appspot.com/javascript_screen_width/

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>javascript 显示器分辨率</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body
    {
        margin:0;
        padding:0;
    }
    </style>
</head>
<body>
<div style="width:3000px;height:2000px;">
<h1>javascript 显示器分辨率</h1>
<div style="position:fixed;left:20px;top:50px;background:#FFCC00;" id="content">


</div>
</div>
<script type="text/javascript">
//<![CDATA[
//var font_size = screen.width / 64 + 'px';
//document.body.style.fontSize = font_size;
//var p = document.createElement("p");
//p.innerHTML = "分辨率" + screen.width + 'x' + screen.height;
//alert("分辨率" + screen.width + 'x' + screen.height);
function showWidth()
{
    var     s   =   " ";
    s   +=   "<p>网页可见区域宽: "+   document.documentElement.clientWidth;
    s   +=   "</p><p>网页可见区域高: "+   document.documentElement.clientHeight;
    s   +=   "</p><p>网页可见区域宽: "+   document.body.offsetWidth     + "   (包括边线和滚动条的宽) ";
    s   +=   "</p><p>网页可见区域高: "+   document.body.offsetHeight   + "   (包括边线的宽) ";
    s   +=   "</p><p>网页正文全文宽: "+   document.body.scrollWidth;
    s   +=   "</p><p>网页正文全文高: "+   document.body.scrollHeight;
    s   +=   "</p><p>网页被卷去的高: "+   document.body.scrollTop;
    s   +=   "</p><p>网页被卷去的左: "+   document.body.scrollLeft;
    s   +=   "</p><p>网页正文部分上: "+   window.screenTop;
    s   +=   "</p><p>网页正文部分左: "+   window.screenLeft;
    s   +=   "</p><p>屏幕分辨率的高: "+   window.screen.height;
    s   +=   "</p><p>屏幕分辨率的宽: "+   window.screen.width;
    s   +=   "</p><p>屏幕可用工作区高度: "+   window.screen.availHeight;
    s   +=   "</p><p>屏幕可用工作区宽度: "+   window.screen.availWidth;
    s   +=   "</p><p>你的屏幕设置是   "+   window.screen.colorDepth   + "   位彩色 ";
    s   +=   "</p><p>你的屏幕设置   "+   window.screen.deviceXDPI   + "   像素/英寸 </p>";
    document.getElementById('content').innerHTML = s;
}
window.onload = function()
{
    showWidth();
}
window.onresize = function()
{
    showWidth();
}
window.onscroll = function()
{
    showWidth();
}
//]]>
</script>
</body>
</html>

截图:

asdf

posted @ 2010-12-16 15:52  sink_cup  阅读(4823)  评论(0编辑  收藏  举报
Creative Commons License

本站原创作品采用知识共享署名 3.0许可协议进行许可。