1. Bom Screen trong JavaScript là gì?

Như ta đã biết trong tiếng anh Screen chính là màn hình. Nó là một thuộc tính của đối tượng window chứa các thông số về màn hình. Đối tượng này được sử dụng để lấy thông tin như chiều rộng màn hình, chiều cao màn hình, độ sâu màu,… Ta có một số thuộc tính của đối tượng Screen là:

  • screen.width : Trả về chiều rộng của màn hình
  • screen.height : Trả về chiều cao của màn hình
  • screen.availWidth : Trả về chiều rộng của màn hình có sẵn cho mục đích hiển thị, không bao gồm thanh menu và những thứ tương tự
  • screen.availHeight : Trả về chiều cao của màn hình có sẵn cho mục đích hiển thị, không bao gồm thanh menu và những thứ tương tự
  • screen.colorDepth : Trả về độ sâu màu của màn hình của người dùng
  • screen.pixelDepth : Trả về độ sâu pixel

Cú pháp của nó là ta có thể sử dụng window.screen hoặc là screen là viết tắt của window.screen

2. Lấy chiều cao và rộng của màn hình với JavaScript

Thuộc tính height (cao) và width (rộng) của đối tượng screen trả về chiều cao và chiều rộng của màn hình của người dùng tính bằng pixel .

Cú pháp :

//lấy chiều rộng
screen.width;
//Lấy chiều cao
screen.height;

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<style type="text/css" media="screen">
    p{
        border:1px solid #dddddd;
        background: #e1e1e1;
        padding: 10px;
    }
</style>
<body>
    <div>Click vào button để xem kết quả</div>
    <button type="button" onclick="getInfo()">Click</button>
    <p id="results"></p>
    <script type="text/javascript">
        function getInfo() {
            var data = "Màn hình của bạn <br>";
            data += "rộng: " + screen.width + "<br>";
            data += "Cao: " + screen.height;
            document.getElementById('results').innerHTML = data;
        }
    </script>
</body>
</html>

Ngoài ra để lấy chiều rộng và chiều cao mà không tính các thanh tính năng của trình duyệt thì ta sử dụng screen.availWidth và screen.availHeight .

Cú pháp:

//Lấy availWidth
screen.availWidth;
//Lấy availHeight
screen.availHeight;

Ví dụ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript</title>
</head>
<style type="text/css" media="screen">
    p{
        border:1px solid #dddddd;
        background: #e1e1e1;
        padding: 10px;
    }
</style>
<body>
    <div>Click vào button để xem kết quả</div>
    <button type="button" onclick="getInfo()">Click</button>
    <p id="results"></p>
    <script type="text/javascript">
        function getInfo() {
            var data = "Màn hình trình duyệt của bạn <br>";
            data += "Rộng: " + screen.availWidth + "<br>";
            data += "Cao: " + screen.availHeight;
            document.getElementById('results').innerHTML = data;
        }
    </script>
</body>
</html>

3. Lấy số lượng màu của màn hình với JavaScript

Thuộc tính color depth cho phép lấy về số lượng màu sắc của màn hình. Thuộc tính screen.colorDepth trả về số bit được sử dụng để hiển thị một màu. Độ sâu màu cho biết một thiết bị có thể tạo ra bao nhiêu màu khác nhau. Ví dụ: Độ sâu màu 1bit có thể tạo ra 2¹ = 2 màu khác nhau, độ sâu màu 2bit có thể tạo ra 2² = 4,… Hầu như các máy tính hiện đại hiện nay đều sử dụng phần cứng 24 bit hoặc 32 bit cho độ phân giải màu

Cú pháp : screen.colorDepth;

Ví dụ:

<div>Click vào button để xem kết quả</div>
<button type="button" onclick="getInfo()">Click</button>
<p id="results"></p>
<script type="text/javascript">
    function getInfo() {
        var data = "Color Depth của màn hình: "+ screen.colorDepth;
        document.getElementById('results').innerHTML = data;
    }
</script>

4. Lấy số pixel depth của màn hình với JavaScript

Thuộc tính pixelDpth trả về độ sâu điểm ảnh của màn hình. Với máy tính hiện đại thì độ sâu màu và độ sâu điểm ảnh bằng nhau.

Cú pháp : screen.pixelDepth;

Ví dụ:

<div>Click vào button để xem kết quả</div>
<button type="button" onclick="getInfo()">Click</button>
<p id="results"></p>
<script type="text/javascript">
    function getInfo() {
        var data = "Color Depth của màn hình: "+ screen.pixelDepth;
        document.getElementById('results').innerHTML = data;
    }
</script>

5. Nhận định hướng của thiết bị với JavaScript

Thuộc tính orientation của đối tượng Screen trả về hướng của màn hình cửa sổ. Nó sẽ trả về 2 thông tin:

  • Type : loại hướng hiển thị, tức là ngang hoặc dọc
  • Angle : Hiển thị góc màn hình của thiết bị

Ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Javascript</title>
</head>
<body>
  <h2>Sử dụng thuộc tính "orientation" của đối tượng "Screen".</h2>
  <p id="orien"></p>
  <button onclick="orien()">Click</button>

  <script>
    function orien(){
      var orienType = screen.orientation.type;
      var orienAngle = screen.orientation.angle;
      document.getElementById("orien").innerHTML = "Hướng màn hình là " + orienType + " và góc là " + orienAngle;
    }
  </script>
</body>
</html>