Fixation WebKit et une hauteur de 100vh
Lorsque vous utilisez une hauteur de fenêtre de 100 pour cent, WebKit et donc Safari gèrent théoriquement le style très bien. Mais si l'on veut aussi respecter les encarts de zone de sécurité, qui sont assez importants sur mobile, une incohérence visuelle devient visible.
Comme cette application Web progressive utilise Tailwind.css, je vais vous montrer comment utiliser correctement 100vh dans Safari respectivement WebKit tout en respectant la zone de sécurité, afin que votre application Web ait l'air dandy sur tous les écrans.
Utiliser un plugin PostCSS
Je recommande d'utiliser le plugin "postcss-100vh-fix". Comme vous avez déjà configuré une postcss-config avec l'initialisation de Tailwind, cette solution s'adapte assez naturellement et utilise le moins de temps possible pour résoudre le problème de hauteur de la fenêtre.
// 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")
],
};
Une note pour tous les utilisateurs de Next.js
Si vous utilisez Tailwind avec Next.js, vous devez appliquer une légère modification à votre configuration PostCSS pour que les choses fonctionnent. Au lieu d'utiliser des importations via "require", vous devez utiliser le nom du package sous forme de chaîne dans le tableau de plugins. De plus, vous n'avez pas besoin d'inclure tous les propres plugins de Tailwind fournis par défaut, car ils sont automatiquement ajoutés par 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"> ...
Une autre solution sans doute plus laide
Bien que ce qui suit ne soit certainement pas recommandé, je vous montre simplement comment c'est techniquement possible d'une autre manière également. Le code suivant ne nécessite aucun plugin ou modification de votre configuration postcss, mais nécessite du Javascript et sort de la syntaxe de Tailwind, du moins dans cet exemple sans aucune optimisation.
// 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;
}
Et nous avons terminé
Cet article fournit un guide rapide sur la façon de corriger une erreur visuelle petite mais sans doute ennuyeuse sur WebKit lors de l'utilisation de 100 pour cent de la hauteur de la fenêtre tout en respectant les encarts de la zone de sécurité. J'espère que vous avez aimé cet article, assurez-vous de consulter d'autres guides et exemples intéressants répertoriés ci-dessous.
