WebKitと100vhの高さを修正
ビューポートの高さを100％使用する場合、WebKit、つまりSafariは理論的にはスタイリングを適切に処理します。ただし、モバイルで非常に重要な安全領域のはめ込みも尊重したい場合は、視覚的な不整合が明らかになります。
このプログレッシブウェブアプリはTailwind.cssを使用しているため、安全な領域を尊重しながら、SafariとWebKitでそれぞれ100vhを正しく使用して、すべての画面でウェブアプリがダンディに見えるようにする方法を紹介します。
PostCSSプラグインの使用
プラグイン「postcss-100vh-fix」プラグインの使用をお勧めします。 Tailwindの初期化を使用してpostcss-configを既に設定しているため、このソリューションは非常に自然に適合し、ビューポートの高さの問題を修正するために最小限の時間を使用します。
// 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")
],
};
すべてのNext.jsユーザーへのメモ
Next.jsでTailwindを使用している場合、動作させるためにPostCSS-configに適用する必要のあるわずかな変更があります。 「require」を介してインポートを使用する代わりに、プラグインの配列の文字列としてパッケージの名前を使用する必要があります。さらに、Tailwindによって自動的に追加されるため、デフォルトで提供される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"> ...
別の間違いなく醜い解決策
以下は絶対にお勧めできませんが、別の方法でも技術的にどのように可能かをお見せします。次のコードでは、プラグインやpostcss-configの変更は必要ありませんが、Javascriptが必要であり、少なくともこの例では最適化なしでTailwindの構文から外れています。
// 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;
}
これで完了です
この記事では、ビューポートの高さを100％使用し、安全な領域のはめ込みを尊重しながら、WebKitで小さいながらもおそらく厄介な視覚的エラーを修正する方法についてのクイックガイドを提供します。この記事が気に入っていただけたら幸いです。以下にリストされている他の興味深いガイドや例を必ず確認してください。
