Mengapa Mod Landskap Safari iPad Mempamerkan Percanggahan InnerHeight/OuterHeight dalam iOS 7?

iOS 7 iPad Safari Landscape Layout Conundrum: Mengatasi Anomali InnerHeight/OuterHeight

Pengguna iOS 7 menghadapi teka-teki yang luar biasa dengan apl web pada iPad dalam mod landskap Safari. Window.innerHeight (672px) berbeza daripada window.outerHeight (692px), yang membawa kepada isu reka letak yang tidak dijangka, seperti 20px ruang tambahan di bahagian bawah. Isu ini menimbulkan cabaran untuk apl yang menggunakan ketinggian 100% untuk kandungan web mereka.

Menavigasi Layout Maze

Untuk menangani isu ini, pelbagai penyelesaian telah muncul. Satu pendekatan melibatkan meletakkan elemen badan secara mutlak hanya dalam iOS 7:

<code class="css">body {
    position: absolute;
    bottom: 0;
    height: 672px !important;
}</code>

Walau bagaimanapun, pendekatan ini hanya mengalihkan ruang tambahan ke bahagian atas halaman dan bukannya menghapuskannya.

Mencari Pijakan Teguh: Kedudukan Tetap dan Pengesanan Ejen Pengguna

Penyelesaian yang lebih mantap terletak pada menggunakan pertanyaan media untuk menggunakan kedudukan tetap pada elemen badan hanya semasa sesi iPad iOS 7 dan memastikan 100% lebar untuk reka letak yang boleh dipercayai:

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

Untuk menentukan sama ada pengguna menyemak imbas pada iPad dengan iOS 7, laksanakan skrip untuk mengesan ejen pengguna:

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

Dengan menggunakan teknik ini , apl web boleh meneutralkan percanggahan innerHeight/outerHeight dengan berkesan dalam iOS 7 iPad Safari dan menyampaikan pengalaman penyemakan imbas yang konsisten dan digilap dalam kedua-dua orientasi potret dan landskap.

Atas ialah kandungan terperinci Mengapa Mod Landskap Safari iPad Mempamerkan Percanggahan InnerHeight/OuterHeight dalam iOS 7?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!