Teks yang diterjemahkan oleh AI.

Masalah Cross-Browsing yang Saya Alami (Terutama Safari)

Bahasa Penulisan: Bahasa Korea
•
Negara Dasar: Semua Negara
•
TI

뚠뚠멍

1 hari yang lalu

Ringkasan posting oleh durumis AI

Untuk mengatasi masalah cross-browsing di browser Safari selama pengembangan web mobile, solusi untuk masalah perhitungan tinggi viewport dan masalah pergeseran UI karena keyboard virtual telah disajikan.
Masalah tinggi viewport dapat diatasi dengan menggunakan dvh atau svh, masalah keyboard virtual dapat diatasi dengan menggunakan min-height, menerapkan vendor prefix, dan kontrol dinamis menggunakan JavaScript.
Saat mengembangkan web mobile Safari, perlu dipertimbangkan penggunaan vendor prefix, batasan kapasitas LocalStorage dan SessionStorage (sekitar 5MB), dan ketidakmampuan berbagi Storage antar tab.

Saya menulis dengan susah payah dan menekan tombol simpan, tetapi muncul error 404 dan hilang ㅠㅠ

Saya ingin mencatat dua masalah cross-browsing yang menyakitkan yang saya alami saat mengembangkan web mobile, dan masalah lain yang perlu dipertimbangkan.

Saya ingin mendokumentasikannya.

Masalah Perhitungan Tinggi Viewport karena Bilah Alamat dan Bilah Navigasi Browser itu Sendiri

Safari dan Samsung Internet memiliki bilah navigasi bawah bawaan browser. Kecuali jika show/hide diatur secara khusus, bilah akan muncul saat digulir ke bawah dan hilang saat digulir ke atas.

Masalahnya adalah viewport tidak tetap dan berubah karena hal-hal ini.

Misalnya, jika tinggi diatur ke 100vh, tata letak akan digambar dengan akurat saat tidak ada bilah navigasi, tetapi jika bilah navigasi muncul, bilah navigasi akan menutupi UI.

Untuk mengatasi masalah ini

1. Gunakan dvh.

Dvh adalah viewport dinamis, yang secara otomatis mencerminkan perubahan setiap kali tinggi viewport berubah. Oleh karena itu, dimungkinkan untuk menangani perubahan tata letak UI tergantung pada keberadaan bilah alamat atau bilah navigasi bawah.

2. Svh juga dapat dipertimbangkan.

Svh adalah tinggi area UI murni, tidak termasuk bilah alamat atau navigasi. Dalam situasi di mana bilah alamat atau navigasi diharapkan muncul, menggunakan svh lebih akurat.

Masalah UI Bergeser karena Keyboard Virtual Saat Input Dipilih

Di Safari mobile, ketika input dipilih, muncul masalah di mana elemen UI yang ada bergeser karena keyboard virtual. Di browser lain, keyboard virtual biasanya muncul secara absolut, tetapi di web mobile Safari, itu seolah-olah display block diterapkan, sehingga menempati tempat.

Safari secara dinamis menyesuaikan tinggi viewport saat keyboard virtual muncul, menyebabkan masalah dengan elemen yang menggunakan unit vh yang disesuaikan ulang. Untuk mengatasi ini,

1. Gunakan min-height.

Tetapkan tinggi untuk mencegah UI bergeser.


html, body {
    height: 100%;
    min-height: 100vh; /* Pengaturan tinggi minimum tetap */
    overflow: hidden;
}

2. Terapkan vendor prefix. (Akan dijelaskan selanjutnya)


html, body {
    height: -webkit-fill-available; /* Untuk Safari */
}

Masukkan atribut yang diterapkan pada browser tertentu seperti Safari.

3. Kontrol viewport secara dinamis dengan JavaScript.


window.addEventListener('resize', () => {
    if (window.innerHeight < 500) {
    // Kode yang akan dieksekusi saat keyboard muncul
    document.body.classList.add('keyboard-visible');
    } else {
    // Kode yang akan dieksekusi saat keyboard hilang
    document.body.classList.remove('keyboard-visible');
    }
});

Gunakan event resize untuk mendeteksi perubahan viewport dan terapkan gaya yang sesuai.

3-1. Kontrol posisi saat event focusin terjadi.


document.querySelectorAll('input, textarea').forEach(element => {
    element.addEventListener('focusin', () => {
        setTimeout(() => {
            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 100);
    });
});

3-2. Kontrol posisi saat keyboard virtual muncul. (Contoh di bawah menerapkan class)


let originalHeight = window.innerHeight;
window.addEventListener('resize', () => {
    if (window.innerHeight < originalHeight) {
        // Keyboard virtual muncul
        document.body.classList.add('keyboard-visible');
    } else {
        // Keyboard virtual hilang
        document.body.classList.remove('keyboard-visible');
    }
});

Dalam kasus saya, saya menyelesaikannya dengan menggunakan metode 3-1. Jika metode 3-1 tidak berfungsi seperti yang diharapkan, pertama-tama gunakan kode di bawah ini untuk memeriksa apakah itu benar.


window.addEventListener('focusin', () => {
    setTimeout(()=> {
        window.scrollTo(0,0)
    }, 100);
})

Lain-lain

Selain itu, saya telah menemukan beberapa hal yang perlu dipertimbangkan saat mengembangkan web mobile di Safari.

1. Gunakan vendor prefix saat menggunakan beberapa atribut.

* Vendor prefix adalah awalan yang memungkinkan browser untuk memahami dan merender atribut css tertentu, dan memastikan bahwa css yang diimplementasikan secara berbeda di setiap browser diterapkan sesuai keinginan. Dengan cara ini, konsistensi dapat dipertahankan di antara browser yang sama dan kompatibilitas dengan browser versi lama dapat dipastikan.

Jenis

-webkit-: Chrome, Safari, dll.
-moz-: Mozilla Firefox
-ms-: Internet Explorer dan Edge
-o-: Opera

Atribut-atribut khas yang membutuhkan vendor prefix adalah sebagai berikut.


.container {
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.item {
    -webkit-flex-grow: 1; /* Safari */
    flex-grow: 1;
    -webkit-flex-shrink: 1; /* Safari */
    flex-shrink: 1;
}
.grid-container {
    display: -ms-grid; /* IE11 dan browser versi lama */
    display: grid; / Browser terbaru */
}

.sticky-element {
    position: -webkit-sticky; /* Safari */
    position: sticky;
}

input[type="text"],
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Selain itu, Safari membatasi kapasitas LocalStorage dan SessionStorage sekitar 5MB, dan tidak berbagi ruang penyimpanan antar tab, jadi perlu diperhatikan.

ps. Saya sangat sedih karena tulisan yang saya tulis sebelumnya hilang. Tulisan yang saya posting bukanlah tulisan berkualitas tinggi,,,ㅠ Saya harus selalu melakukan penyimpanan sementara.

Subjek

#Mobile web
#Cross-browsing

Ringkasan posting oleh durumis AI

Untuk mengatasi masalah cross-browsing di browser Safari selama pengembangan web mobile, solusi untuk masalah perhitungan tinggi viewport dan masalah pergeseran UI karena keyboard virtual telah disajikan.
Masalah tinggi viewport dapat diatasi dengan menggunakan dvh atau svh, masalah keyboard virtual dapat diatasi dengan menggunakan min-height, menerapkan vendor prefix, dan kontrol dinamis menggunakan JavaScript.
Saat mengembangkan web mobile Safari, perlu dipertimbangkan penggunaan vendor prefix, batasan kapasitas LocalStorage dan SessionStorage (sekitar 5MB), dan ketidakmampuan berbagi Storage antar tab.