Cara Mengatasi Isu Orientasi Pertanyaan Media CSS pada Tablet: Adakah Berbaloi untuk Menolak Pertanyaan Media?

Menyelesaikan Isu Orientasi Pertanyaan Media CSS dengan Kaedah Alternatif

Pertanyaan media CSS menyediakan cara yang mudah untuk melaraskan gaya berdasarkan orientasi peranti. Walau bagaimanapun, pada peranti tablet tertentu, terutamanya yang menjalankan Android, kehadiran papan kekunci lembut semasa input boleh mengganggu fungsi ini.

Untuk mengelakkan isu ini, penyelesaian alternatif melibatkan mengelakkan penggunaan pertanyaan media untuk orientasi- penggayaan berasaskan. Sebaliknya, kelas boleh ditambah dan dialih keluar secara dinamik untuk menyasarkan elemen tertentu berdasarkan orientasi semasa peranti.

Pendekatan ini bermula dengan menetapkan kelas, seperti "potret" atau "landskap," kepada elemen HTML. Selepas itu, peraturan CSS ditakrifkan untuk mengawal paparan elemen berdasarkan kehadiran kelas ini. Contohnya:

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

Ini memastikan elemen yang sesuai dapat dilihat tanpa mengira orientasi, tanpa bergantung pada pertanyaan media.

Alternatif yang Dipertingkat: Nisbah Aspek min dan Nisbah Aspek maks

Penyelesaian yang lebih terbaharu dan mantap melibatkan penggunaan pertanyaan media yang menyasarkan nisbah bidang skrin. Khususnya, pertanyaan media berikut boleh digunakan:

<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>

Kaedah ini memanfaatkan fakta bahawa nisbah bidang skrin berubah dengan ketara antara orientasi potret dan landskap. Oleh itu, ia menyediakan cara yang tepat dan boleh dipercayai untuk mengawal gaya CSS berdasarkan orientasi, walaupun dengan kehadiran papan kekunci lembut.

Atas ialah kandungan terperinci Cara Mengatasi Isu Orientasi Pertanyaan Media CSS pada Tablet: Adakah Berbaloi untuk Menolak Pertanyaan Media?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!