BOM-Screen object、Width、Height

Posted on Edited on In Views: Disqus:

 

此文章用來演示BOM裡多種寬與高的特性。

以螢幕解析度寬乘高為1680*1050p當作例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        .red {
            color: red;
        }
        .width-color {
            color: #216dbd;
        }
        p {
            width: 513px;
        }
        html {
            width: 700px;
            height: 700px;
            overflow: scroll;
        }
    </style>
</head>
<body onresize="getInfo()" onload="getInfo()">
    <script>
        function getInfo() {
            var sScreenWidth = "<p>一、screen.width</p><p class='width-color'>回傳螢幕解析度寬度：" + screen.width + " px</p>";
            var sScreenHeight = "<p>二、screen.height</p><p>回傳螢幕解析度高度：" + screen.height + " px</p>";
            var sScreenAvailWidth = "<p>三、screen.availWidth</p><p class='width-color'>回傳螢幕最大可用寬度：" + screen.availWidth + " px</p>";
            var sScreenAvailHeight = "<p>四、screen.availHeight</p><p>回傳螢幕最大可用高度：" + screen.availHeight + " px</p>";
            var sScreenColorDepth = "<p>五、screen.colorDepth</p><p>回傳一個顏色要使用幾個bit來表示：" + screen.colorDepth + " bits</p>";
            var sScreenPixelDepth = "<p>六、screen.pixelDepth</p><p>回傳螢幕的一個pixel要使用幾個bit來表示：" + screen.pixelDepth + " bits</p>";
            var sScreenDeviceXDPI = "<p>七、screen.deviceXDPI</p><p>回傳你的螢幕設置為每英吋多少像素(for IE browser)：" + screen.deviceXDPI + " 像素/英吋</p>";
            var sScreenX = "<p>八、screenX</p><p>回傳瀏灠器的X軸位置：" + screenX + "</p>";
            var sScreenLeft = "<p>八、screenLeft</p><p>回傳瀏灠器的X軸位置：" + screenLeft + "</p>";
            var sScreenY = "<p>九、screenY</p><p>回傳瀏灠器的Y軸位置：" + screenY + "</p>";
            var sScreenTop = "<p>九、screenTop</p><p>回傳瀏灠器的Y軸位置：" + screenTop + "</p>";        
            var result = sScreenWidth + "<hr>" + sScreenHeight + "<hr>" + sScreenAvailWidth + "<hr>" + sScreenAvailHeight + "<hr>";
            result = result + sScreenColorDepth + "<hr>" + sScreenPixelDepth + "<hr>" + sScreenDeviceXDPI + "<hr>";
            result = result + sScreenX + "<hr>" + sScreenLeft + "<hr>";
            result = result + sScreenY + "<hr>" + sScreenTop + "<hr>";
            document.body.innerHTML = result;
        }
    </script>
</body>
</html>

 

一、screen.width

回傳螢幕解析度寬度：1680 px

 

二、screen.height 回傳螢幕解析度高度

回傳螢幕解析度高度：1050 px

 

三、screen.availWidth

回傳螢幕最大可用寬度：1680 px

 

四、screen.availHeight

回傳螢幕最大可用高度：1050 px

windows工作列是可變動的，所以其高度將不會採計，

顯示chrome書籤列或不顯示chrome書籤列會影響screen.availHeight數值。

 

五、screen.colorDepth

回傳一個顏色要使用幾個bit來表示：24 bits

 

六、screen.pixelDepth

回傳螢幕的一個pixel要使用幾個bit來表示：24 bits

 

七、screen.deviceXDPI

回傳你的螢幕設置為每英吋多少像素(for IE browser)：undefined 像素/英吋

發現在chrome無法使用該屬性，而IE可以，例如回傳96像素/英吋。

 

八、screenX、screenLeft

回傳瀏灠器左上角X軸在螢幕上的絕對位置，在雙螢幕下其值有可能是負的。

 

九、screenY、screenTop

回傳瀏灠器左上角Y軸在螢幕上的絕對位置。

 

參考資料：

onresize Event

window.devicePixelRatio