Bevestiging van WebKit en 'n hoogte van 100vh
As u die aansighoogte van 100 persent gebruik, kan WebKit en dus Safari die stilering teoreties goed hanteer. Maar as u ook die veilige area-insette wil respekteer, wat baie belangrik is op mobiele toestelle, word 'n visuele onbedoeldheid sigbaar.
Aangesien hierdie progressiewe web-app Tailwind.css gebruik, sal ek u wys hoe om 100vh in Safari onderskeidelik WebKit korrek te gebruik, terwyl u ook die veilige area respekteer, sodat u web-app op alle skerms sleg lyk.
Met behulp van 'n PostCSS-inprop
Ek beveel aan dat u die invoegtoepassing “postcss-100vh-fix” -inprop gebruik. Aangesien u al 'n postcss-config met Tailwind se initialisering opgestel het, pas hierdie oplossing heel natuurlik en gebruik dit die minste tyd om die hoogtepuntprobleem op te los.
// 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")
],
};
'N Nota vir alle Next.js-gebruikers
As u Tailwind met Next.js gebruik, is daar 'n klein verandering wat u op u PostCSS-config moet toepas om dinge te laat werk. In plaas daarvan om invoer via 'vereis' te gebruik, moet u die naam van die pakket as 'n string gebruik in die reeks inproppe. Verder hoef u nie al Tailwind se eie inproppe by te voeg nie, aangesien dit outomaties deur Tailwind gevoeg word.
// 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"> ...
Nog 'n beswaarlike lelike oplossing
Alhoewel die volgende beslis nie aanbeveel word nie, wys ek u net hoe dit tegnies op 'n ander manier moontlik is. Die volgende kode benodig geen invoegtoepassings of veranderinge aan u postcss-config nie, maar vereis 'n mate van Javascript en breek uit die sintaksis van Tailwind, ten minste in hierdie voorbeeld, sonder enige optimalisering.
// 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;
}
En ons is klaar
Hierdie artikel bied 'n vinnige gids oor hoe u 'n klein, maar waarskynlik irriterende visuele fout op WebKit kan oplos wanneer u 100 persent van die uitsigport se hoogte gebruik, terwyl u ook die insetsels van die veilige gebied respekteer. Ek hoop dat u van hierdie artikel gehou het. Kyk na ander interessante gidse en voorbeelde wat hieronder gelys word.
