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