Tổng hợp Code JavaScript trên Mobile

Bài viết "Tổng hợp Code JavaScript trên Mobile" mang đến một cái nhìn sâu sắc vào ba đoạn mã JavaScript được thiết kế đặc biệt để tối ưu hóa trải nghiệm người dùng trên thiết bị di động.

Mục đích là chúng ta có thể tối ưu code, giúp trang có thể hoạt động nhanh hơn. Từ những phương pháp linh hoạt cho responsive design đến các tính năng tương tác động, bạn sẽ khám phá những mã code tiên tiến và ứng dụng chúng để đảm bảo trang web của bạn hoạt động mượt mà và hiệu quả trên mọi loại điện thoại thông minh.

1. Kiểm tra thiết bị di dộng

Copy

<script>
  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
    // Thiết bị di động
  } else {
    // Thiết bị không phải di động
  }
</script>

2. Sử dụng Window.innerWidth và Window.innerHeight

Copy

<script>
  if (window.innerWidth <= 800 && window.innerHeight <= 600) {
    // Thiết bị di động
  } else {
    // Thiết bị không phải di động
  }
</script>

3. Sử dụng Media Queries trong CSS

Copy

<script>
  if (window.getComputedStyle(document.body, '::before').getPropertyValue('content').includes('mobile')) {
    // Thiết bị di động
  } else {
    // Thiết bị không phải di động
  }
</script>

4. Kiểm tra xem thiết bị có hỗ trợ sự kiện ontouchstart

 

Copy

<script>
  if ('ontouchstart' in window || navigator.msMaxTouchPoints) {
    // Thiết bị di động
  } else {
    // Thiết bị không phải di động
  }
</script>

5. Dùng thư viện UAParser.js

Copy

<script src="https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.28/ua-parser.min.js"></script>
<script>
  var parser = new UAParser();
  var result = parser.getResult();
  if (result.device.type === 'mobile') {
    // Thiết bị di động
  } else {
    // Thiết bị không phải di động
  }
</script>