Stel dit reg vir Webkit se 100vh in Tailwind

Hoe om die 100vh-gedrag in Tailwind op te los

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.

Image 65e06f472edb

Image e8b139616bb2

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.