Dit is een door AI vertaalde tekst.

Mijn cross-browser problemen (vooral Safari)

Geschreven taal: Koreaans
•
Standaardland: Alle landen
•
Informatietechnologie

뚠뚠멍

1 dagen geleden

Samenvatting van de tekst door durumis AI

Om cross-browser problemen in de Safari browser op te lossen tijdens de ontwikkeling van een mobiele website, zijn oplossingen voor problemen met het berekenen van de viewport hoogte en UI-verschuivingen door het virtuele toetsenbord voorgesteld.
Het probleem met de viewport hoogte kan worden opgelost met behulp van dvh of svh, het probleem met het virtuele toetsenbord met min-height, vendor prefixes, en dynamische besturing met Javascript.
Bij het ontwikkelen van mobiele websites voor Safari moet je rekening houden met het gebruik van vendor prefixes, de beperkte capaciteit van LocalStorage en SessionStorage (ongeveer 5MB) en het ontbreken van Storage-deling tussen tabs.

Ik had hard aan een artikel gewerkt en op opslaan gedrukt, maar toen kreeg ik een 404-foutmelding en was alles weg ㅠㅠ

Ik wil de twee lastige cross-browser problemen beschrijven die ik tegenkwam tijdens de ontwikkeling van een mobiele website, en andere zaken waar je rekening mee moet houden.

Dit wil ik vastleggen.

Probleem met het berekenen van de viewport hoogte door de adresbalk en navigatiebalk van de browser zelf

Safari en Samsung Internet hebben een ingebouwde navigatiebalk onderaan de browser. Tenzij je specifiek show/hide hebt ingesteld, verschijnt deze balk bij het scrollen naar beneden en verdwijnt hij bij het scrollen naar boven.

Het probleem is dat hierdoor de viewport niet vaststaat en verandert.

Bijvoorbeeld: als je een hoogte van 100vh instelt, wordt de lay-out correct weergegeven als de navigatiebalk er niet is, maar als de navigatiebalk verschijnt, wordt de UI bedekt door de navigatiebalk.

Om dit probleem op te lossen,

1. Gebruik dvh.

Dvh staat voor dynamische viewport en past zich automatisch aan bij wijzigingen in de viewport hoogte. Daardoor is het mogelijk om de UI lay-out aan te passen aan de aanwezigheid of afwezigheid van de adresbalk of de onderste navigatiebalk.

2. Je kunt ook svh overwegen.

Svh is de hoogte van het UI-gebied exclusief de adresbalk en navigatiebalk. In situaties waarin de adresbalk of navigatiebalk waarschijnlijk zal verschijnen, is het gebruik van svh nauwkeuriger.

Probleem met het verschuiven van de UI door het virtuele toetsenbord bij het selecteren van een input-veld

In mobiele Safari verschoof de bestaande UI na het selecteren van een input-veld door het virtuele toetsenbord. In andere browsers verschijnt het virtuele toetsenbord meestal absoluut, maar in mobiele Safari lijkt het alsof display block is toegepast, waardoor het ruimte inneemt.

In Safari past het systeem de hoogte van de viewport dynamisch aan wanneer het virtuele toetsenbord verschijnt, waardoor elementen die vh gebruiken opnieuw worden aangepast. Om dit op te lossen,

1. Gebruik min-height.

Bevestig de hoogte om te voorkomen dat de UI verschuift.


html, body {
    height: 100%;
    min-height: 100vh; /* Stel een vaste minimale hoogte in */
    overflow: hidden;
}

2. Pas vendor prefixes toe. (wordt later besproken)


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

Voeg attributen toe die van toepassing zijn op specifieke browsers zoals Safari.

3. Beheer de viewport dynamisch met Javascript.


window.addEventListener('resize', () => {
    if (window.innerHeight < 500) {
    // Code die moet worden uitgevoerd wanneer het toetsenbord verschijnt
    document.body.classList.add('keyboard-visible');
    } else {
    // Code die moet worden uitgevoerd wanneer het toetsenbord verdwijnt
    document.body.classList.remove('keyboard-visible');
    }
});

Gebruik een resize event om te detecteren wanneer de viewport verandert en pas de juiste stijl toe.

3-1. Beheer de positie wanneer het focusin-event wordt geactiveerd.


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

3-2. Beheer de positie wanneer het virtuele toetsenbord verschijnt. (In het onderstaande voorbeeld wordt een class toegepast)


let originalHeight = window.innerHeight;
window.addEventListener('resize', () => {
    if (window.innerHeight < originalHeight) {
        // Het virtuele toetsenbord is geopend
        document.body.classList.add('keyboard-visible');
    } else {
        // Het virtuele toetsenbord is gesloten
        document.body.classList.remove('keyboard-visible');
    }
});

Ik heb methode 3-1 gebruikt om het probleem op te lossen. Als methode 3-1 niet werkt zoals verwacht, controleer dan eerst of de onderstaande code werkt zoals verwacht.


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

Overige opmerkingen

Hieronder staan nog enkele zaken om te overwegen bij het ontwikkelen van een mobiele website voor Safari.

1. Gebruik vendor prefixes bij het gebruik van bepaalde attributen.

* Vendor prefixes zijn voorvoegsels die ervoor zorgen dat de browser specifieke CSS-attributen begrijpt en kan renderen. Ze zorgen ervoor dat CSS, dat op verschillende manieren door verschillende browsers wordt geïmplementeerd, werkt zoals bedoeld. Hierdoor wordt consistentie tussen browsers gewaarborgd en is compatibiliteit met oudere browsers mogelijk.

Types

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

Hieronder staan voorbeelden van attributen waarvoor vendor prefixes nodig zijn.


.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 en oudere browsers */
    display: grid; /* nieuwste browsers */
}

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

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

Verder beperkt Safari de capaciteit van LocalStorage en SessionStorage tot ongeveer 5 MB, en de opslagruimte wordt niet gedeeld tussen tabs, dus let hierop.

ps. Ik ben erg verdrietig dat mijn originele artikel verloren is gegaan. Het artikel dat ik heb gepost is niet van hoge kwaliteit, maar... ㅠ Ik moet echt een automatisch opslaan gebruiken.

Onderwerp

#Mobiele web
#Cross-browsing

Samenvatting van de tekst door durumis AI

Om cross-browser problemen in de Safari browser op te lossen tijdens de ontwikkeling van een mobiele website, zijn oplossingen voor problemen met het berekenen van de viewport hoogte en UI-verschuivingen door het virtuele toetsenbord voorgesteld.
Het probleem met de viewport hoogte kan worden opgelost met behulp van dvh of svh, het probleem met het virtuele toetsenbord met min-height, vendor prefixes, en dynamische besturing met Javascript.
Bij het ontwikkelen van mobiele websites voor Safari moet je rekening houden met het gebruik van vendor prefixes, de beperkte capaciteit van LocalStorage en SessionStorage (ongeveer 5MB) en het ontbreken van Storage-deling tussen tabs.