WebKit'i ve 100vh yüksekliğini düzeltme
Görünüm alanı yüksekliğini yüzde 100 kullanırken, WebKit ve dolayısıyla Safari teorik olarak stili gayet iyi idare eder. Ancak mobilde oldukça önemli olan güvenli alan eklerine de saygı duymak isterseniz, görsel bir tutarsızlık ortaya çıkıyor.
Bu progresif web uygulaması Tailwind.css kullandığından, güvenli alana saygı duyarak Safari'de ve WebKit'te 100vh'yi nasıl doğru bir şekilde kullanacağınızı göstereceğim, böylece web uygulamanız tüm ekranlarda harika görünecek.
PostCSS eklentisi kullanma
“postcss-100vh-fix” eklentisini kullanmanızı öneririm. Tailwind'in başlatılmasıyla zaten bir postcss-config ayarlamış olduğunuzdan, bu çözüm oldukça doğaldır ve görüntü alanı yüksekliği sorununu çözmek için en az süreyi kullanır.
// 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")
],
};
Tüm Next.js kullanıcıları için bir not
Next.js ile Tailwind kullanıyorsanız, işlerin yürümesi için PostCSS-config'inize uygulamanız gereken küçük bir değişiklik var. “Require” yoluyla içe aktarma kullanmak yerine, eklenti dizisinde paketin adını bir dize olarak kullanmanız gerekir. Ayrıca, Tailwind tarafından otomatik olarak eklendiklerinden, varsayılan olarak gelen tüm Tailwind'in kendi eklentilerini dahil etmeniz gerekmez.
// 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"> ...
Başka bir tartışmasız çirkin çözüm
Aşağıdakiler kesinlikle tavsiye edilmese de, size bunun teknik olarak başka bir şekilde nasıl mümkün olduğunu gösteriyorum. Aşağıdaki kod, postcss-config'inizde herhangi bir eklenti veya değişiklik gerektirmez, ancak bazı Javascript gerektirir ve en azından bu örnekte herhangi bir optimizasyon olmadan Tailwind'in sözdiziminden ayrılır.
// 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;
}
ve işimiz bitti
Bu makale, WebKit'te görüntü alanı yüksekliğinin yüzde 100'ünü kullanırken aynı zamanda güvenli alanın iç kısımlarına da saygı gösterirken küçük ama muhtemelen can sıkıcı bir görsel hatanın nasıl düzeltileceği konusunda hızlı bir kılavuz sağlar. Umarım bu makaleyi beğenmişsinizdir, aşağıda listelenen diğer ilginç kılavuzları ve örnekleri kontrol ettiğinizden emin olun.
