Window screen lấy thông tin màn hình client

Khi thiết kế một trang web lúc xử lý hình ảnh chắc chắn chúng ta phải đặt kích thước cho hình ảnh đúng không. Cơ mà màn hình phía client đâu có cố định kích thước. Nếu muốn loại bỏ những sự cố bất ngờ 😀 xảy ra ta phải biết được kích thước màn hình phía client. Đây là lí do để chúng ta tìm hiểu đối tượng window screen. Mình xin đi thẳng vào vấn đề luôn :v

window screen

Window screen

Đối tượng screen cung cấp phương thức để lấy thông tin về màn hình của người truy cập. Bạn cần những thông tin này để xác định xem nên hiển thị ảnh nào hoặc trang web có thể lớn đến đâu để điều chỉnh. Bất kể bạn có sử dụng đối tượng screen hay không. Bạn vẫn cần tạo một thiết kế CSS cơ bản tốt để hỗ trợ mọi kích cỡ màn hình.

Các thuộc tính của đối tượng screen

availHeight chiều cao màn hình khi trừ đi thanh tác vụ cái chứa start bên dưới ấy
availWidth chiều rộng màn hình khi trừ đi thanh tác vụ
colorDepth độ sâu màu màn hình cửa sổ trả về số bit thường là 24
height chiều cao toàn bộ màn hình
width chiều rộng toàn bộ màn hình

Ví dụ

width và availWidth

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1></h1>
	<h1></h1>
	<script type="text/javascript">
			var y = document.querySelectorAll('h1');
			// truy xuất thẻ h1
			var w = screen.width;
			// láy chiều rộng = width
			var aw = screen.availWidth;
			// lấy chiều rộng = availWidth
			y[0].innerHTML = "Chiều rộng width: " + w +" px" ;
			y[1].innerHTML = "Chiều rộng availwidth: " + aw +" px" ;
	</script>
</body>
</html>

Tất nhiên thì chưa thây sự khác nhau vì thường thì máy tính để thanh tác vụ bên dưới mà 😀

height – availHeight

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1></h1>
	<h1></h1>
	<script type="text/javascript">
			var y = document.querySelectorAll('h1');
			// truy xuất thẻ h1
			var h = screen.height;
			// láy chiều rộng = width
			var ah = screen.availHeight;
			// lấy chiều rộng = availWidth
			y[0].innerHTML = "Chiều cao height: " + h +" px" ;
			y[1].innerHTML = "Chiều rộng availHeight: " + ah +" px" ;
	</script>
</body>
</html>

colorDepth

var color = screen.colorDepth;
//Lấy giá trị
console.log(color);
//output: thường là 24

Okê xong :D, ngắn và gọn là phong cách của mình. Tóm lại thằng window screen này sẽ giúp chúng ta lấy được thông tin màn hình của người dùng có ngon không :D. Lấy được rồi thì sẽ tìm cách tiếp cận :v đùa thôi. Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây

5/5 - (2 bình chọn)

Window screen

Bài viết liên quan

Reader Interactions

Để lại một bình luận Hủy