Pernahkah anda mereka bentuk tapak web dan bekerja pada halaman yang sempurna apabila tiba-tiba papan kekunci Safari iOS muncul? Itu dia—kawasan kosong besar yang tidak dialu-alukan di halaman anda.
Namun, anda tidak bersendirian, jika anda menggaru kepala tentang sebabnya.
Mari kita siasat isu pelik ini dan cari penyelesaian.
Bayangkan ini: pengguna anda mengetik pada medan borang dan papan kekunci maya hanya muncul secara ajaib. Semasa ia menaikkan kandungan, sedikit ruang putih yang menjengkelkan muncul di bahagian bawah halaman. Nampaknya reka bentuk anda tiba-tiba memutuskan bahawa ia memerlukan sedikit ruang pernafasan tambahan.
Ini disebabkan oleh fakta bahawa iOS Safari sendiri mengendalikan perubahan dalam saiz port pandangan apabila papan kekunci muncul, tetapi kadangkala ia menjadi sedikit keliru. Penyemak imbas cuba mengubah saiz kawasan kandungan tetapi kemudian meninggalkan jurang janggal itu.
Fikirkan pengendalian iOS Safari terhadap port pandang seperti cuba memasukkan seluar jeans yang agak terlalu ketat. Penyemak imbas cuba melaraskan, tetapi kadangkala ia tidak sesuai. Ini mengakibatkan ruang putih yang janggal di bahagian bawah halaman anda.
Nasib baik, beberapa pembaikan yang sangat mudah dan mesra pemula akan membantu anda menangani perkara ini. Mari kita betulkan gangguan reka letak tersebut:
Salah satu pembetulan yang paling primitif ialah dengan hanya melaraskan CSS anda sedemikian rupa untuk menangani ketinggian paparan dinamik. Anda menetapkan ketinggian minimum pada kandungan anda, jadi walaupun papan kekunci dibuka, perkara tidak kelihatan sangat janggal.
html, body { height: 100%; margin: 0; overflow: hidden; } .content { min-height: 100vh; /* Ensures the content area is at least as tall as the viewport */ display: flex; flex-direction: column; }
Ia seperti memberi kandungan anda "tingkatan ketinggian". Semua orang kadangkala memerlukan ketinggian yang lebih sedikit, bukan?
2. Gunakan JavaScript untuk Melaraskan Ketinggian Halaman
Nah, jika anda lebih berani dan benar-benar ingin memulakan perniagaan, anda boleh melaraskan ketinggian halaman secara dinamik menggunakan JavaScript. Anda boleh katakan ia seperti mempunyai pembantu peribadi anda sendiri di tapak web anda, memastikan ia sentiasa berada pada ketinggian yang sempurna.
function adjustHeight() { document.body.style.height = `${window.innerHeight}px`; } window.addEventListener('resize', adjustHeight); adjustHeight(); // Call it on page load
Anggaplah ia sebagai memastikan halaman web anda tidak perlu membongkok.
3. Semak Elemen Kedudukan Tetap
Elemen kedudukan tetap kadangkala boleh menjadi sebahagian daripada reka letak yang kucar-kacir apabila papan kekunci dihidupkan. Pastikan itu bukan masalahnya. Sama ada menukar kedudukan mereka atau membetulkannya menggunakan pertanyaan media untuk saiz dan orientasi skrin yang berbeza.
.header, .footer { position: fixed; width: 100%; }
Bayangkan unsur-unsur ini seperti tetamu VIP di pesta: berikan mereka ruang sendiri, tetapi tidak dengan mengorbankan menguasai seluruh bilik!
4. Uji pada Berbilang Peranti
Anda juga harus menguji pembetulan anda pada banyak peranti iOS. Perkara yang berfungsi pada satu iPhone mungkin tidak berfungsi pada iPhone yang lain. Sama seperti kasut, anda perlu melihat bahawa semuanya sesuai.
Isu ujian akan paling baik ditangkap dengan peranti sebenar dan bukan pada emulator sahaja. Anda tidak akan membeli sepasang kasut tanpa mencubanya, bukan?.
Masalah ruang putih dalam Safari iOS apabila papan kekunci dibuka—anggap ia sebagai teka-teki reka bentuk yang kecil. Namun, pembaikan ini akan membuatnya hilang dan memastikan halaman anda tajam. Anggaplah ia sebagai peluang untuk melenturkan senjata pembangunan web tersebut dan mungkin bergelak ketawa sepanjang perjalanan.
Atas ialah kandungan terperinci Cara Membetulkan Isu Ruang Putih yang Menjengkelkan dalam iOS Safari: Panduan Pemula dengan Penyelesaian Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!