Papan Kekunci Lembut Mengganggu Gaya Orientasi: Bagaimana Kami Boleh Membetulkannya?-tutorial css-php.cn

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

Mary-Kate Olsen

Lepaskan： 2024-10-26 17:20:03

asal

832 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!