首頁 > 開發者 > JavaScript

Javascript 檢測解析度 在各個瀏覽器下結果截圖

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More