Rumah >hujung hadapan web >tutorial css >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:03913semak imbas
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!