Bagaimana Memaksa Orientasi Landskap dan Lumpuhkan Auto-Putar pada Tapak Web Mudah Alih?

Force Landskap Orientasi pada Tapak Mudah Alih

Dalam era pembangunan web tertumpu mudah alih moden, adalah penting untuk mengoptimumkan pengalaman pengguna untuk semua peranti dan orientasi. Soalan ini meneroka cara untuk melumpuhkan autoputar dan menguatkuasakan orientasi landskap sahaja pada tapak mudah alih.

Penyelesaian CSS

Satu pendekatan ialah menggunakan pertanyaan media untuk menguji orientasi peranti. Dalam helaian gaya potret, anda boleh menyembunyikan semua kandungan dan memaparkan mesej yang menunjukkan bahawa apl hanya berfungsi dalam mod landskap. Contohnya:

<code class="css">@media screen and (orientation: portrait) {
  body {
    display: none;
  }

  .orientation-message {
    display: block;
    text-align: center;
    font-size: 2rem;
    margin-top: 100px;
  }
}</code>

Penyelesaian jQuery

Sebagai alternatif, anda boleh menggunakan jQuery untuk menyemak orientasi peranti dan melaraskan reka letak halaman secara dinamik dengan sewajarnya. Berikut ialah contoh skrip:

<code class="javascript">$(function() {
  var orientation = window.orientation;

  if (orientation == 0 || orientation == 180) {
    // Landscape mode
    $('body').css('transform', 'rotate(0)');
  } else {
    // Portrait mode
    $('body').css('transform', 'rotate(-90deg)');
  }
});</code>

Skrip ini menyemak sifat window.orientation, yang menunjukkan orientasi semasa peranti. Berdasarkan nilai (0 atau 180 untuk landskap, 90 atau -90 untuk potret), ia memutarkan kandungan halaman menggunakan transformasi CSS.

Penyelesaian khusus yang anda pilih bergantung pada pilihan anda dan keupayaan peranti sasaran anda . Kedua-dua pendekatan CSS dan jQuery menyediakan cara yang berkesan untuk memaksa orientasi landskap dan melumpuhkan autoputar pada tapak mudah alih.

Atas ialah kandungan terperinci Bagaimana Memaksa Orientasi Landskap dan Lumpuhkan Auto-Putar pada Tapak Web Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!