Rumah > Artikel > hujung hadapan web > Papan Kekunci Lembut Mengganggu Gaya Orientasi: Bagaimana Kami Boleh Membetulkannya?

Papan Kekunci Lembut Mengganggu Gaya Orientasi: Bagaimana Kami Boleh Membetulkannya?

Mary-Kate Olsenasal: 2024-10-26 17:20:03821semak imbas

Soft Keyboard Disrupts Orientation Styles: How Can We Fix It?

Pertanyaan Media CSS: Papan Kekunci Lembut Mengganggu Peraturan Orientasi – Penyelesaian Alternatif

Isu timbul apabila menggunakan pertanyaan media CSS untuk menggunakan berasaskan orientasi gaya pada peranti tablet. Masalah berlaku apabila pengguna mengetik pada medan input, mencetuskan kemunculan papan kekunci lembut. Kawasan yang boleh dilihat pada halaman web dikurangkan, menyebabkan halaman dipaparkan dalam mod landskap CSS dan bukannya mod potret.

Satu penyelesaian yang berpotensi adalah dengan mengalih keluar media (orientasi: potret) dan (orientasi: landskap) pertanyaan. Sebaliknya, gunakan pertanyaan media (nisbah aspek min: 13/9) untuk mod landskap dan pertanyaan media (nisbah aspek maks: 13/9) untuk mod potret. Pertanyaan ini menentukan nisbah bidang paparan dan bukannya orientasi peranti.

<code class="css">@media screen and (min-aspect-ratio: 13/9) {
  /* Landscape styles here */
}

@media screen and (max-aspect-ratio: 13/9) {
  /* Portrait styles here */
}</code>

Pendekatan lain melibatkan penugasan kelas kepada elemen html berdasarkan orientasi semasa dan menyasarkan kelas tersebut dalam CSS.

<code class="html"><html class="landscape">
<body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1>
</body>
</html></code>

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

Penyelesaian ini memerlukan JavaScript untuk mengendalikan penambahan dan pengalihan keluar kelas berdasarkan perubahan orientasi.

Atas ialah kandungan terperinci Papan Kekunci Lembut Mengganggu Gaya Orientasi: Bagaimana Kami Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html for using class this display viewport input issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mengubah Saiz SVG Secara Dinamik kepada Muatan Bekas Induk?Artikel seterusnya：Bagaimana untuk Mengubah Saiz SVG Secara Dinamik kepada Muatan Bekas Induk?

Artikel berkaitan

Lihat lagi