Thao tác với window screen

Trong bài hướng dẫn này, bạn sẽ tìm hiểu về đối tượng screen là gì và một số thao tác với nó trong JavaScript.

Thao tác với đối tượng Screen trong JavaScript

1. Đối tượng screen là gì?

Đối tượng window.screen chứa thông tin về màn hình của người dùng như độ phân giải (tức là chiều rộng và chiều cao của màn hình), độ sâu màu, độ sâu pixel, v.v.

Vì đối tượng window nằm trên cùng của chuỗi phạm vi, nên các thuộc tính của đối tượng window.screen có thể được truy cập mà không cần chỉ định window.

Ví dụ window.screen.width có thể được viết dưới dạng screen.width.

Phần sau đây sẽ hướng dẫn bạn cách lấy thông tin về màn hình của người dùng bằng cách sử dụng đối tượng screen.

2. Tính toán chiều rộng và chiều cao của màn hình bằng JavaScript

Bạn có thể sử dụng thuộc tính screen.width and screen.height lấy chiều rộng và chiều cao của màn hình của người dùng tính bằng pixel

Ví dụ sau sẽ hiển thị độ phân giải màn hình của bạn khi click vào nút:

<script>
function getResolution() {
    alert("KT màn hình: " + screen.width + "x" + screen.height);
}
</script>
 
<button type="button" onclick="getResolution();">Tính kích thước màn hình</button>

3. Tính toán chiều rộng và chiều cao có sẵn của màn hình bằng JavaScript

Thuộc tính screen.availWidth và screen.availHeight có thể được sử dụng để lấy chiều rộng và chiều cao có sẵn cho trình duyệt để sử dụng trên màn hình của người dùng, tính bằng pixel.

Chiều rộng và chiều cao có sẵn của màn hình bằng chiều rộng và chiều cao thực của màn hình trừ chiều rộng và chiều cao của các tính năng giao diện như thanh tác vụ trong Windows.

Đây là một ví dụ:

<script>
function getAvailSize() {
    alert("KT sẵn có: " + screen.availWidth + ", Height: " + screen.availHeight);
}
</script>
 
<button type="button" onclick="getAvailSize();">Lấy kích thước có sẵn</button>

4. Tính độ sâu màu

Bạn có thể sử dụng thuộc tính screen.colorDepth để lấy độ sâu màu trên màn hình của người dùng. Độ sâu màu là số bit được sử dụng để biểu thị màu sắc của một pixel.

Độ sâu màu cho biết màn hình thiết bị có thể tạo ra bao nhiêu màu.

Ví dụ, màn hình có độ sâu màu là 8 có thể tạo ra 256 màu (2^8).

Hiện tại, hầu hết các thiết bị đều có màn hình với độ sâu màu 24 hoặc 32.

Nói một cách đơn giản, nhiều bit hơn tạo ra nhiều biến thể màu hơn, chẳng hạn như 24 bit có thể tạo ra 2^24 = 16.777.216 biến thể màu (true color).

Trong khi 32 bit có thể tạo ra 2^32 = 4.294.967.296 biến thể màu (deep color).

<script>
function getColorDepth() {
    alert("Độ sâu màu màn hình: " + screen.colorDepth);
}
</script>
 
<button type="button" onclick="getColorDepth();">Tính độ sâu màu màn hình</button>

Có thể bạn chưa biết: Cho đến nay hầu như mọi màn hình máy tính và điện thoại đều sử dụng độ sâu màu 24-bit. 24 bit hầu như luôn sử dụng 8 bit của mỗi R, G, B. Trong khi trong trường hợp độ sâu màu 32 bit, 24 bit được sử dụng cho màu sắc và 8 bit còn lại được sử dụng cho độ trong suốt.

5. Tính độ sâu pixel màn hình

Bạn có thể lấy độ sâu pixel của màn hình bằng thuộc tính screen.pixelDepth. Độ sâu pixel là số bit được phần cứng hiển thị hệ thống sử dụng trên mỗi pixel.

Đối với các thiết bị hiện đại, độ sâu màu và độ sâu điểm pixel bằng nhau.

Đây là một ví dụ:

<script>
function getPixelDepth() {
    alert("Độ sâu pixel: " + screen.pixelDepth);
}
</script>
 
<button type="button" onclick="getPixelDepth();">Tính độ sau pixel</button>

Ok, đến đây có lẽ bạn đã biết cách tính toán, lấy khá nhiều thông số của màn hình thông qua đối tượng screen với JavaScript rồi đó.

Những tính toán này chắc chắc sẽ giúp ích cho bạn rất nhiều nếu bạn muốn tạo ra những tính năng linh hoạt cho người dùng cụ thể.

Chúc bạn học lập trình JavaScript tốt.

> Tham khảo: HỌC LẬP TRÌNH FULL STACK trong 12 tháng. Học đổi nghề, học để đi làm luôn mà không cần bằng cấp.