Ripari WebKit kaj altecon de 100vh
Kiam vi uzas 100-procenton la vidinda alteco, WebKit kaj sekve Safaro teorie bone traktas la stilon. Sed se vi ankaŭ volas respekti la sekurajn enmetojn, kiuj estas sufiĉe gravaj en poŝtelefonoj, videblas nekonsekvenco.
Ĉar ĉi tiu progresema interreta programo uzas Tailwind.css, mi montros al vi kiel ĝuste uzi 100vh en Safaro respektive WebKit respektante ankaŭ la sekuran areon, tiel ke via interreta programo aspektas danda sur ĉiuj ekranoj.
Uzante kromaĵon PostCSS
Mi rekomendas uzi la aldonaĵon "postcss-100vh-fix". Ĉar vi jam starigis postcss-config kun la inicialigo de Tailwind, ĉi tiu solvo kongruas tute nature kaj uzas la malplej multe da tempo por solvi la problemon pri vidinda alteco.
// 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")
],
};
Noto por ĉiuj Next.js-uzantoj
Se vi uzas Tailwind kun Next.js, estas iomete modifita, kiun vi devas apliki al via PostCSS-agordo por funkciigi aferojn. Anstataŭ uzi importojn per "postuli", vi devas uzi la nomon de la pakaĵo kiel ĉenon en la tabelo de aldonaĵoj. Krome, vi ne devas inkluzivi ĉiujn proprajn aldonaĵojn de Tailwind, kiuj aperas defaŭlte, ĉar Tailwind aŭtomate aldonas ilin.
// 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"> ...
Alia probable pli malbela solvo
Kvankam la sekvaĵo certe ne estas rekomendinda, mi nur montras al vi, kiel ankaŭ teknike eblas alimaniere. La sekva kodo ne postulas kromprogramojn aŭ ŝanĝojn al via postcss-config, sed postulas iom da Ĝavaskripto kaj eliras el la sintakso de Tailwind, almenaŭ en ĉi tiu ekzemplo sen iuj plibonigoj.
// 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;
}
Kaj ni finis
Ĉi tiu artikolo donas rapidan gvidilon pri kiel ripari malgrandan sed verŝajne ĝenan vidan eraron en WebKit uzante 100 procentojn de la alteco de la vidpunkto, respektante ankaŭ la enmetojn de la sekura areo. Mi esperas, ke vi ŝatis ĉi tiun artikolon, nepre kontrolu aliajn interesajn gvidilojn kaj ekzemplojn listigitajn sube.
