Học cách phát hiện chiều rộng màn hình lớn hơn hoặc nhỏ hơn một giá trị chỉ định trong JavaScript.
Đôi khi bạn muốn thực thi mã dựa trên một điều kiện.
Có thể có mã bạn muốn hiển thị trên màn hình lớn nhưng không trên màn hình nhỏ (như hầu hết smartphone) do diện tích hạn chế.
Việc xử lý phát hiện loại thiết bị cụ thể là lĩnh vực phức tạp, các lập trình viên không thể thống nhất. Sau giờ nghiên cứu, tôi vẫn chưa thu thập đủ dữ liệu uy tín để viết bài (tiếp tục..).
Cách phát hiện chiều rộng màn hình tính bằng Pixel động
May mắn thay, nhắm đến kích thước màn hình dựa trên giá trị pixel dễ dàng hơn nhiều, và là tính năng bạn sẽ thấy hữu ích trong nhiều tình huống.
Dán mã sau vào console trình duyệt hoặc trình soạn thảo trực tuyến như CodePen:
window.addEventListener("resize", function() { if (window.matchMedia("(min-width: 500px)").matches) { console.log("Screen width is at least 500px") } else { console.log("Screen less than 500px") } })Giờ hãy thay đổi kích thước cửa sổ trình duyệt từ hẹp sang rộng, và quan sát console ghi log kết quả.
Cách mã JavaScript hoạt động:
- Trước tiên, gắn phương thức
addEventListener()vào đối tượng window. - Bên trong trình lắng nghe sự kiện, thiết lập hai tham số,
'resize'vàfunction() {}. - Tham số đầu tiên yêu cầu trình lắng nghe lắng nghe sự kiện resize (chỉ một chút thay đổi kích thước cũng đăng ký là sự kiện). Sau đó chạy một hàm ẩn danh dựa trên sự kiện resize.
- Bên trong thân hàm ẩn danh, khởi tạo hai câu lệnh điều kiện.
- Điều kiện đầu: "nếu chiều rộng màn hình (bất kỳ thiết bị nào) ít nhất 500px, thì console.log('làm gì đó')". Điều kiện hai: "Nếu chiều rộng màn hình nhỏ hơn 500px, thì console.log('làm gì đó khác')".
Chơi với mã trên CodePen