Fixing WebKit und eine Höhe von 100vh
Bei Verwendung von 100 Prozent der Viewport-Höhe handhaben WebKit und damit Safari das Styling theoretisch gut. Will man aber auch die auf dem Handy recht wichtigen Safe-Area-Einschübe respektieren, wird eine optische Unstimmigkeit sichtbar.
Da diese progressive Web-App Tailwind.css verwendet, zeige ich Ihnen, wie Sie 100vh in Safari bzw.
Verwenden eines PostCSS-Plugins
Ich empfehle die Verwendung des Plugins „postcss-100vh-fix“ Plugin. Da Sie bereits eine postcss-config mit der Initialisierung von Tailwind eingerichtet haben, passt diese Lösung ganz natürlich und benötigt am wenigsten Zeit, um das Problem mit der Viewport-Höhe zu beheben.
// 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")
],
};
Ein Hinweis für alle Next.js-Benutzer
Wenn Sie Tailwind mit Next.js verwenden, müssen Sie eine geringfügige Änderung an Ihrer PostCSS-Konfiguration vornehmen, damit die Dinge funktionieren. Anstatt Importe über „require“ zu verwenden, müssen Sie den Namen des Pakets als String im Array der Plugins verwenden. Darüber hinaus müssen Sie nicht alle standardmäßigen eigenen Plugins von Tailwind einschließen, da sie von Tailwind automatisch angehängt werden.
// 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"> ...
Eine andere wohl hässlichere Lösung
Obwohl das Folgende definitiv nicht zu empfehlen ist, zeige ich Ihnen nur, wie es technisch auch auf andere Weise möglich ist. Der folgende Code erfordert keine Plugins oder Änderungen an Ihrer postcss-config, erfordert jedoch etwas Javascript und bricht zumindest in diesem Beispiel ohne Optimierungen aus der Syntax von Tailwind aus.
// 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;
}
Und wir sind fertig
Dieser Artikel bietet eine kurze Anleitung, wie Sie einen kleinen, aber wohl ärgerlichen visuellen Fehler in WebKit beheben können, wenn Sie 100 Prozent der Höhe des Ansichtsfensters verwenden und gleichzeitig die Einschübe des sicheren Bereichs berücksichtigen. Ich hoffe, Ihnen hat dieser Artikel gefallen, lesen Sie auch andere interessante Leitfäden und Beispiele, die unten aufgeführt sind.
