Rumah > Artikel > hujung hadapan web > Bagaimana untuk Mengatasi Dilema Orientasi Pertanyaan Media CSS pada Tablet: Nisbah Aspek untuk Penyelamat?

Bagaimana untuk Mengatasi Dilema Orientasi Pertanyaan Media CSS pada Tablet: Nisbah Aspek untuk Penyelamat?

Susan Sarandonasal: 2024-10-26 07:33:02982semak imbas

How to Overcome the CSS Media Query Orientation Dilemma on Tablets: Aspect Ratios to the Rescue?

Dilema Orientasi Pertanyaan Media CSS: Mencari Penyelesaian

Apabila bekerja dengan berbilang peranti tablet, bergantung pada pertanyaan media CSS untuk menggunakan orientasi peranti- gaya berasaskan boleh menimbulkan cabaran. Isu ini timbul apabila papan kekunci lembut muncul semasa input teks, yang mengecilkan halaman web yang boleh dilihat dan mencetuskan aplikasi CSS berasaskan landskap, walaupun peranti berada dalam mod potret.

Penyelesaian biasa ialah menambah kelas ke elemen HTML dan menyasarkan kelas khusus berdasarkan orientasi peranti:

<code class="html"><html class="landscape">
  <body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1></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>

Walau bagaimanapun, pendekatan yang lebih serba boleh terletak pada penggunaan pertanyaan media yang menyasarkan nisbah aspek. Untuk mod landskap:

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

Untuk mod potret:

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

Kaedah ini memastikan pengalaman yang konsisten tanpa mengira kehadiran papan kekunci lembut. Keberkesanannya boleh dikaitkan dengan fakta bahawa ia kekal tahan air pada ketinggian papan kekunci, tidak seperti pertanyaan media berasaskan orientasi.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Dilema Orientasi Pertanyaan Media CSS pada Tablet: Nisbah Aspek untuk Penyelamat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html for this 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：Bagaimanakah Elemen `` Mencapai Penjajaran Teks Menegak Tanpa `garis-tinggi` yang Eksplisit?Artikel seterusnya：Bagaimanakah Elemen `` Mencapai Penjajaran Teks Menegak Tanpa `garis-tinggi` yang Eksplisit?

Artikel berkaitan

Lihat lagi