Mengapakah window.innerHeight Berbeza daripada window.outerHeight dalam Mod Landskap Safari iOS 7?

Pepijat Reka Letak Landskap Safari iPad iOS 7: InnerHeight/OuterHeight Perbezaan

Dalam iOS 7 Safari, aplikasi web dengan ketinggian badan 100% mengalami isu pelik dalam mod landskap. Window.innerHeight (672px) berbeza daripada window.outerHeight (692px).

Percanggahan ini membawa kepada 20px tambahan ruang di bawah kawasan yang boleh dilihat, menyebabkan elemen navigasi tersembunyi di belakang krom penyemak imbas apabila meleret ke atas . Elemen yang diposisikan sepenuhnya di bahagian bawah skrin juga kelihatan mati 20px.

Penyelesaian

Untuk mengurangkan pepijat ini, anda boleh menggunakan penggodaman CSS yang menetapkan ketinggian badan secara eksplisit kepada 672px dan letakkannya secara mutlak hanya dalam iOS 7:

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

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

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

Dengan menggunakan penyelesaian ini, outerHeight akan terpaksa memadankan innerHeight, memastikan reka letak apl anda berkelakuan seperti yang dimaksudkan dalam mod landskap Safari iOS 7.

Atas ialah kandungan terperinci Mengapakah window.innerHeight Berbeza daripada window.outerHeight dalam Mod Landskap Safari iOS 7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!