Bagaimanakah JavaScript Dapat Mengesan Perubahan Orientasi dalam Aplikasi Web?

Melaksanakan Pengesanan Perubahan Orientasi dengan JavaScript

Banyak peranti seperti iPad dan Galaxy Tab menawarkan pengalaman pengguna yang lancar dengan melaraskan secara dinamik ke skrin berbeza orientasi. Untuk meningkatkan interaksi ini, aplikasi web mengesan perubahan orientasi dan menyesuaikan dengan sewajarnya adalah bernilai.

JavaScript menyediakan dua mekanisme utama untuk tujuan ini:

Pertanyaan Media CSS

Pertanyaan media CSS direka bentuk terutamanya untuk menentukan gaya berdasarkan ciri peranti dan skrin tertentu, termasuk orientasi. Berikut ialah contoh:

@media (orientation: landscape) {
  body {
    /* Styles for landscape orientation */
  }
}

Walaupun pertanyaan media CSS menawarkan kesederhanaan, mereka hanya menyediakan pengesanan satu titik dan tidak mencetuskan sebarang peristiwa apabila orientasi berubah.

Orientasi Skrin API

API Orientasi Skrin, bagaimanapun, menyediakan penyelesaian yang lebih mantap. Ia menggunakan peristiwa dan sifat untuk menjejaki perubahan orientasi dalam masa nyata, membolehkan pembangun bertindak balas dengan berkesan. Berikut ialah coretan kod yang menunjukkan penggunaannya:

window.addEventListener("DOMContentLoaded", () => {
  const output = document.getElementById("o9n");

  const displayOrientation = () => {
    const screenOrientation = screen.orientation.type;
    output.innerHTML = `The orientation of the screen is: ${screenOrientation}`;
    // Custom logic to handle different orientations
  };

  if (screen && screen.orientation !== null) {
    try {
      window.screen.orientation.onchange = displayOrientation;
      displayOrientation();
    } catch (e) {
      output.innerHTML = e.message;
    }
  }
});

Dengan memanfaatkan API Orientasi Skrin, anda boleh melaksanakan pengesanan perubahan orientasi yang canggih dalam aplikasi JavaScript anda, memastikan pengalaman pengguna yang responsif dan menarik merentas pelbagai orientasi peranti.

Atas ialah kandungan terperinci Bagaimanakah JavaScript Dapat Mengesan Perubahan Orientasi dalam Aplikasi Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!