A WebKit és a 100vh magasság javítása
A nézetablak magasságának 100 százalékos alkalmazásakor a WebKit és ezért a Safari elméletileg remekül kezeli a stílusot. De ha tiszteletben akarja tartani a biztonságos terület betétjeit, amelyek nagyon fontosak a mobilon, akkor vizuális inkonzitencia válik láthatóvá.
Mivel ez a progresszív webalkalmazás a Tailwind.css fájlt használja, megmutatom, hogyan kell helyesen használni a 100vh-t a Safari, illetve a WebKit alkalmazásban, tiszteletben tartva a biztonságos területet is, hogy webalkalmazása minden képernyőn pompásnak tűnjön.
PostCSS-plugin használatával
Javaslom a „postcss-100vh-fix” plugin használatát. Mivel a Tailwind inicializálásával már beállított egy postcss-config konfigurációt, ez a megoldás teljesen természetes, és a legkevesebb időt vesz igénybe a nézetablak magasságával kapcsolatos problémák megoldására.
// 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")
],
};
Megjegyzés az összes Next.js-felhasználó számára
Ha a Tailwind alkalmazást használja a Next.js-sel, akkor egy apró módosítást kell végrehajtania a PostCSS-config-on a dolgok működése érdekében. Ahelyett, hogy importálná a „megkövetelést”, a csomag nevét karakterláncként kell használnia a beépülő modulok tömbjében. Ezenkívül nem kell feltüntetnie a Tailwind összes alapértelmezett beépülő modulját, mivel a Tailwind automatikusan hozzáfűzi őket.
// 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"> ...
Egy másik vitathatatlanul csúnyább megoldás
Bár az alábbiak biztosan nem ajánlottak, csak megmutatom, hogy ez technikailag hogyan lehetséges más módon is. A következő kód nem igényel bővítményeket vagy módosításokat a postcss-config-ban, de szükség van némi Javascriptre, és kitör a Tailwind szintaxisából, legalábbis ebben a példában optimalizálás nélkül.
// 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;
}
És készen vagyunk
Ez a cikk gyors útmutatót nyújt arról, hogyan lehet kijavítani egy kicsi, de vitathatatlanul idegesítő vizuális hibát a WebKit-en, amikor a nézetablak magasságának 100 százalékát használja, miközben tiszteletben tartja a biztonságos terület betétjeit is. Remélem, tetszett ez a cikk, feltétlenül nézzen meg más érdekes útmutatókat és példákat, amelyek az alábbiakban szerepelnek.
