Cách phát hiện xem độ rộng màn hình lớn hơn hay nhỏ hơn giá trị trong JavaScript

Tìm hiểu cách phát hiện xem chiều rộng màn hình lớn hơn hay nhỏ hơn một giá trị được 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ột số mã mà bạn muốn hiển thị trên màn hình lớn nhưng không hiển thị trên màn hình nhỏ (như hầu hết các điện thoại thông minh) do phạm vi giới hạn của chúng.

Xử lý phát hiện loại thiết bị cụ thể là một lĩnh vực phức tạp, mà các nhà phát triển dường như không đồng ý. Sau nhiều giờ nghiên cứu, tôi vẫn chưa thu thập đủ dữ liệu đáng tin cậy để đặt bút viết vào giấy (còn tiếp tục ..).

Cách phát hiện động chiều rộng màn hình theo pixel

May mắn thay, việc nhắm mục tiêu kích thước màn hình dựa trên giá trị pixel dễ dàng hơn rất nhiều và đó là một tính năng mà bạn sẽ được hưởng lợi trong nhiều trường hợp.

Dán mã sau vào bảng điều khiển trình duyệt của bạn hoặc trình chỉnh sửa 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")
  }
})

Bây giờ, hãy bắt đầu thay đổi kích thước cửa sổ trình duyệt của bạn từ hẹp thành rộng và quan sát bảng điều khiển đăng xuất kết quả.

Cách mã JavaScript hoạt động:

• Đầu tiên, chúng tôi đính kèm addEventListener() đối với đối tượng window.
• Bên trong trình xử lý sự kiện, chúng tôi thiết lập hai đối số, 'resize' và function() {} .
• Đối số đầu tiên là yêu cầu trình xử lý sự kiện lắng nghe thay đổi kích thước sự kiện (ngay cả một phần nhỏ của việc thay đổi kích thước sẽ đăng ký như một sự kiện). Sau đó, chúng tôi chạy một chức năng ẩn danh dựa trên sự kiện thay đổi kích thước.
• Bên trong phần thân của hàm ẩn danh, chúng tôi bắt đầu hai câu lệnh điều kiện.
• Điều kiện đầu tiên: “Nếu chiều rộng màn hình (của bất kỳ thiết bị nào) ít nhất là 500px, thì console.log ('do something')”. Điều kiện thứ hai: “Nếu chiều rộng màn hình nhỏ hơn 500px thì console.log ('làm việc khác')".

Chơi với mã trên CodePen