Mengapa Terdapat Percanggahan Ketinggian 20px dalam iOS 7 Safari untuk Mod Landskap iPad?

Percanggahan Reka Letak Landskap Safari iOS 7: innerHeight vs. outerHeight

Dalam iOS 7 Safari untuk iPad, isu pelik timbul dengan apl web yang menggunakan ketinggian 100%. Nilai window.innerHeight (672px) dan window.outerHeight (692px) menyimpang semata-mata dalam mod landskap. Percanggahan ini mengakibatkan 20px tambahan ruang yang tidak digunakan, yang menjejaskan reka letak elemen navigasi dan elemen yang diletakkan secara mutlak di bahagian bawah skrin.

Untuk mengurangkan masalah ini sehingga Apple menanganinya, pembangun telah mengambil jalan penyelesaian. Satu pendekatan melibatkan meletakkan badan secara mutlak dalam iOS 7, dengan berkesan mengalihkan jurang 20px ke bahagian atas halaman dan bukannya bahagian bawah. Walau bagaimanapun, penyelesaian yang lebih berkesan telah muncul.

Dengan menetapkan kedudukan badan kepada tetap, isu itu boleh dielakkan:

<code class="css">@media (orientation:landscape) {
    html.ipad.ios7 > body {
        position: fixed;
        bottom: 0;
        width:100%;
        height: 672px !important;
    }
}</code>

Untuk mengenal pasti peranti iPad yang menjalankan iOS 7, skrip berikut boleh bekerja:

<code class="javascript">if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
    $('html').addClass('ipad ios7');
}</code>

Dengan melaksanakan penyelesaian ini, pembangun boleh memastikan tingkah laku susun atur yang betul dalam iOS 7 Safari untuk iPad, menghapuskan percanggahan ketinggian yang menyusahkan dan kesannya pada navigasi dan kedudukan.

Atas ialah kandungan terperinci Mengapa Terdapat Percanggahan Ketinggian 20px dalam iOS 7 Safari untuk Mod Landskap iPad?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!