Bagaimanakah anda boleh mengatasi isu gangguan papan kekunci lembut dengan pertanyaan media CSS untuk orientasi peranti?-tutorial css-php.cn

Bagaimanakah anda boleh mengatasi isu gangguan papan kekunci lembut dengan pertanyaan media CSS untuk orientasi peranti?

Linda Hamilton

Lepaskan： 2024-10-26 08:37:30

asal

996 orang telah melayarinya

How can you overcome the issue of soft-keyboard interference with CSS media queries for device orientation?

Pertanyaan Media CSS dan Orientasi Peranti: Mengatasi Isu Papan Kekunci Lembut

Pengenalan

Pertanyaan media dalam CSS menyediakan mekanisme yang berkuasa untuk menggunakan gaya berdasarkan ciri peranti seperti orientasi. Walau bagaimanapun, pada peranti tertentu, papan kekunci lembut boleh mengganggu peraturan orientasi ini, menyebabkan halaman web dipaparkan secara tidak betul. Artikel ini meneroka penyelesaian alternatif untuk menangani masalah ini.

Pertanyaan Media untuk Orientasi

Pertanyaan media boleh digunakan untuk menyasarkan orientasi potret dan landskap menggunakan sintaks berikut:

<code class="css">@media all and (orientation:portrait) { /* Portrait styles */ }

@media all and (orientation:landscape) { /* Landscape styles */ }</code>

Salin selepas log masuk

Walaupun pendekatan ini berfungsi dengan baik untuk kebanyakan peranti, pendekatan ini gagal apabila papan kekunci lembut dibuka dalam mod potret. Kawasan boleh dilihat yang dikurangkan memaksa halaman untuk dipaparkan dalam orientasi landskap, memecahkan reka letak.

Penyelesaian Alternatif

Satu alternatif ialah menggunakan JavaScript untuk mengesan papan kekunci lembut dan gunakan gaya berasaskan orientasi secara dinamik. Ini boleh dicapai menggunakan sifat window.innerHeight, yang mengembalikan ketinggian tetingkap penyemak imbas. Apabila papan kekunci lembut dibuka, ketinggian tetingkap berkurangan, mencetuskan fungsi JavaScript:

<code class="js">window.addEventListener('resize', function() {
  if (window.innerHeight < screen.height) {
    // Soft-keyboard is open
    document.documentElement.classList.add('soft-keyboard-open');
  } else {
    // Soft-keyboard is closed
    document.documentElement.classList.remove('soft-keyboard-open');
  }
});

Salin selepas log masuk

Setelah papan kekunci lembut dikesan, kelas CSS boleh digunakan pada elemen untuk menyasarkan orientasi potret atau landskap dengan gaya tersuai:

<code class="css">.soft-keyboard-open.portrait { /* Portrait styles with soft-keyboard open */ }

.soft-keyboard-open.landscape { /* Landscape styles with soft-keyboard open */ }

.portrait { /* Standard portrait styles */ }

.landscape { /* Standard landscape styles */ }</code>

Salin selepas log masuk

Pilihan Lain

Pilihan lain yang disebut dalam soalan asal ialah menambah kelas pada

<code class="html"><html class="landscape">
  ...
</html>

.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }</p></code>

Salin selepas log masuk

Pendekatan ini memerlukan penggunaan JavaScript untuk menetapkan atribut kelas bagi elemen berdasarkan orientasi. Ia mungkin tidak boleh dipercayai seperti pendekatan pertanyaan @media, terutamanya pada peranti dengan saiz skrin bukan standard.

Kemajuan Terkini

Baru-baru ini, ciri pertanyaan media yang lebih baharu telah diperkenalkan yang memberikan sokongan yang lebih baik untuk pengesanan orientasi tanpa isu papan kekunci lembut. Ini termasuk:

nisbah aspek min dan nisbah aspek maks
kunci orientasi dan buka kunci orientasi

Mereka membenarkan yang lebih tepat penyasaran orientasi skrin dan tingkah laku apabila papan kekunci lembut dibuka.

Kesimpulan

Isu dengan papan kekunci lembut yang mengganggu pertanyaan media CSS untuk orientasi adalah cabaran biasa . Dengan melaksanakan penyelesaian alternatif yang dibincangkan di atas, pembangun boleh memastikan pemaparan halaman web yang konsisten pada peranti dengan papan kekunci lembut, memberikan pengalaman pengguna yang lebih baik.

Atas ialah kandungan terperinci Bagaimanakah anda boleh mengatasi isu gangguan papan kekunci lembut dengan pertanyaan media CSS untuk orientasi peranti?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!