JavaScript入门教程(5) js Screen屏幕对象

简介

Screen 对象代表了当前浏览器所在电脑的屏幕信息。通过 Screen 对象，我们可以获取到客户端屏幕的宽、高、物理宽、高、可用宽、高等相关信息，可以方便设计响应式页面。

属性

Screen.width 获取当前屏幕的宽度。
Screen.height 获取当前屏幕的高度。
Screen.availWidth 获取当前屏幕可用的宽度（不包含窗口的工具栏和边框）。
Screen.availHeight 获取当前屏幕可用的高度（不包含窗口的工具栏和边框）。
Screen.colorDepth 获取当前屏幕的色深。
Screen.pixelDepth 获取浏览器窗口的颜色分辨率。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>获取屏幕相关信息</title>
</head>
<body>
    <script type="text/javascript">
        document.writeln("屏幕分辨率宽度:"+screen.width);
        document.writeln("<br />");
        document.writeln("屏幕分辨率高度:"+screen.height);
        document.writeln("<br />");
        document.writeln("屏幕可用工作区宽度:"+screen.availWidth);
        document.writeln("<br />");
        document.writeln("屏幕可用工作区高度:"+screen.availHeight);
        document.writeln("<br />");
        document.writeln("屏幕色彩位数:"+screen.colorDepth);
        document.writeln("<br />");
        document.writeln("屏幕每像素的位数:"+screen.pixelDepth);
        document.writeln("<br />");
    </script>
</body>
</html>

方法

Screen 对象还提供了一些方法，以下为常用的方法：

Screen.lockOrientation() 锁定屏幕方向。
Screen.unlockOrientation() 解除屏幕方向。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>锁定横屏/竖屏</title>
</head>
<body>
    <p>这是一个锁定横屏/竖屏的示例。</p>
    <button onclick="lock()">锁定</button>
    <button onclick="unlock()">解锁</button>
    <script type="text/javascript">
        function lock() {
            var screenLock = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
            if (screenLock('landscape')) {
                document.writeln("已锁定为横屏。");
            } else {
                document.writeln("无法锁定。");
            }
        }

        function unlock() {
            var screenUnlock = screen.unlockOrientation || screen.mozUnlockOrientation || screen.msUnlockOrientation;
            screenUnlock();
            document.writeln("已解锁。");
        }
    </script>
</body>
</html>