Bagaimanakah Anda Boleh Mengesan Perubahan Orientasi pada Peranti Skrin Sentuh Menggunakan JavaScript?

Mengesan Perubahan Orientasi Peranti Menggunakan JavaScript

Peranti merentas platform seperti iPad dan Galaxy Tab boleh diputar, mengakibatkan perubahan dalam orientasi. Mengesan perubahan orientasi ini boleh menjadi penting untuk mencipta aplikasi web yang responsif dan mesra pengguna.

Bolehkah JavaScript Mengesan Perubahan Orientasi?

Ya, JavaScript, digabungkan dengan teknik lain, membolehkan pembangun mengesan perubahan orientasi pada peranti skrin sentuh seperti iPad dan Tab Galaxy.

Menggunakan Pertanyaan Media CSS

Sebelum ini, pertanyaan media CSS biasanya digunakan untuk mengesan orientasi perubahan. Walau bagaimanapun, kaedah ini kini dianggap tidak digunakan lagi dan tidak boleh dipercayai.

Mengemas kini ke API ScreenOrientation

Amalan terbaik semasa ialah menggunakan ScreenOrientation API, yang mendedahkan antara muka ScreenOrientation dan acara screenorientation.onchange.

Pengendalian dan Pelaksanaan Acara

Untuk melaksanakan pengesanan perubahan orientasi dalam JavaScript, ikut langkah berikut:

1. Tambah pendengar untuk acara DOMContentLoaded.
2. Tentukan fungsi untuk memaparkan orientasi skrin semasa.
3. Daftarkan pengendali acara onchange untuk objek screen.orientation.
4. Output orientasi maklumat kepada elemen HTML yang ditetapkan.

Contoh Kod:

Kod JavaScript berikut menunjukkan cara untuk mengesan perubahan orientasi menggunakan API ScreenOrientation:

window.addEventListener("DOMContentLoaded", () => {
  const output = document.getElementById("o9n");
  const displayOrientation = () => {
    const screenOrientation = screen.orientation.type;
    output.innerHTML = `The orientation of the screen is: ${screenOrientation}`;
    // Perform conditional logic based on the orientation
  };
  if (screen && screen.orientation !== null) {
    try {
      window.screen.orientation.onchange = displayOrientation;
      displayOrientation();
    } catch (e) { output.innerHTML = e.message; }
  }
});

Contoh HTML:

Untuk memaparkan maklumat orientasi, tambahkan kod HTML berikut pada halaman anda:

Orientation: <span>

Penyelesaian yang disemak ini menggunakan yang terkini API Orientasi Skrin dan memastikan pengesanan perubahan orientasi yang boleh dipercayai pada peranti skrin sentuh moden.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Mengesan Perubahan Orientasi pada Peranti Skrin Sentuh Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!