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

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>

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 <p>Setelah papan kekunci lembut dikesan, kelas CSS boleh digunakan pada  elemen untuk menyasarkan orientasi potret atau landskap dengan gaya tersuai:</p>
<pre class="brush:php;toolbar:false"><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>

Pilihan Lain

Pilihan lain yang disebut dalam soalan asal ialah menambah kelas pada

<code class="html">
  ...


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

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!