Fissaggio WebKit e un'altezza di 100vh
Quando si utilizza un'altezza del viewport del 100%, WebKit e quindi Safari in teoria gestiscono bene lo stile. Ma se vuoi rispettare anche i riquadri dell'area sicura, che sono piuttosto importanti sui dispositivi mobili, diventa visibile un'incongruenza visiva.
Poiché questa app Web progressiva utilizza Tailwind.css, ti mostrerò come utilizzare correttamente 100vh in Safari rispettivamente WebKit rispettando anche l'area sicura, in modo che la tua app Web appaia dandy su tutti gli schermi.
Utilizzo di un plug-in PostCSS
Consiglio di utilizzare il plugin "postcss-100vh-fix". Poiché hai già impostato un postcss-config con l'inizializzazione di Tailwind, questa soluzione è abbastanza naturale e utilizza la minor quantità di tempo per risolvere il problema dell'altezza della finestra.
// 1. Install the dependency
// npm i postcss-100vh-fix
//
// Then use a custom PostCSS-config.
// This example assumes you only have
// one custom plugin, which leads to
// the following config.
module.exports = {
plugins: [
require("postcss-100vh-fix")
],
};
Una nota per tutti gli utenti Next.js
Se stai usando Tailwind con Next.js, c'è una leggera modifica che devi applicare alla tua configurazione PostCSS per far funzionare le cose. Invece di utilizzare le importazioni tramite "richiedi", devi utilizzare il nome del pacchetto come stringa nell'array di plugin. Inoltre, non è necessario includere tutti i plug-in di Tailwind forniti di default, poiché vengono aggiunti automaticamente da Tailwind.
// Effectively the same config,
// but now compatible with Next.js,
// which only accepts strings for
// plugins, where they represent their
// package name.
module.exports = {
plugins: ["tailwindcss","autoprefixer","postcss-100vh-fix"],
};
// ... in your app ...
// Now all that's left to do is
// apply the screen-height, which
// results in a '100vh'-value:
//
// ... <div class="h-screen"> ...
Un'altra soluzione probabilmente più brutta
Sebbene quanto segue non sia assolutamente raccomandato, ti mostro solo come è tecnicamente possibile anche in un altro modo. Il codice seguente non richiede alcun plug-in o modifica al tuo postcss-config, ma richiede alcuni Javascript e interrompe la sintassi di Tailwind, almeno in questo esempio senza alcuna ottimizzazione.
// Manually setting the 'style':
//
function View(){
const isMobileWebKit = useIsMobileWebkit();
return (
<div
style={{
height: isMobileWebKit ? "-webkit-fill-available" : "100vh"
}}> /* ... */ </div>;
}
/*
<div
style={{
height: isMobileWebKit ? "-webkit-fill-available" : "100vh"
}}> ...
*/
// This is the hook to determine
// if we're in a WebKit-env:
export function useIsMobileWebkit() {
const [flag, setFlag] = useState(false);
useEffect(() => setFlag(isMobileWebkit()), []);
return flag;
}
E abbiamo finito
Questo articolo fornisce una guida rapida su come correggere un piccolo ma probabilmente fastidioso errore visivo su WebKit quando si utilizza il 100 percento dell'altezza della finestra, rispettando allo stesso tempo i riquadri dell'area sicura. Spero che questo articolo ti sia piaciuto, assicurati di controllare altre guide ed esempi interessanti elencati di seguito.
