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 구성에 적용해야 작동하는 약간의 수정 사항이 있습니다. "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에 대한 변경이 필요하지 않지만, 최소한이 예에서는 최적화없이 약간의 자바 스크립트가 필요하고 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에서 작지만 틀림없이 성가신 시각적 오류를 수정하는 방법에 대한 빠른 가이드를 제공합니다. 이 기사가 마음에 드셨기를 바라며 아래에 나열된 다른 흥미로운 가이드와 예제를 확인하십시오.
