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

Zalo 0971539681 Tư vấn & Hỗ trợ
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

<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

<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

<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
 
<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

<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>

Bài liên quan ngẫu nhiên

Nhận xét

Contact Me on Zalo