Arreglando WebKit y una altura de 100vh
Cuando se usa el 100 por ciento de la altura de la ventana gráfica, WebKit y, por lo tanto, Safari teóricamente manejan el estilo bien. Pero si también desea respetar los insertos de área segura, que son bastante importantes en el móvil, se hace visible una inconsistencia visual.
Como esta aplicación web progresiva usa Tailwind.css, le mostraré cómo usar correctamente 100vh en Safari o WebKit, respetando al mismo tiempo el área segura, para que su aplicación web se vea excelente en todas las pantallas.
Usando un complemento PostCSS
Recomiendo usar el complemento "postcss-100vh-fix". Como ya ha configurado una configuración de postcss con la inicialización de Tailwind, esta solución se adapta de forma bastante natural y utiliza la menor cantidad de tiempo para solucionar el problema de la altura de la ventana gráfica.
// 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")
],
};
Una nota para todos los usuarios de Next.js
Si está utilizando Tailwind con Next.js, hay una pequeña modificación que debe aplicar a su configuración PostCSS para que todo funcione. En lugar de usar importaciones a través de "require", debes usar el nombre del paquete como una cadena en la matriz de complementos. Además, no es necesario que incluyas todos los complementos propios de Tailwind que vienen de forma predeterminada, ya que Tailwind los agrega automáticamente.
// 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"> ...
Otra solución posiblemente más fea
Aunque definitivamente no se recomienda lo siguiente, solo le muestro cómo es técnicamente posible de otra manera también. El siguiente código no requiere ningún complemento o cambio en su postcss-config, pero requiere algo de Javascript y se sale de la sintaxis de Tailwind, al menos en este ejemplo sin ninguna optimización.
// 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;
}
Y hemos terminado
Este artículo proporciona una guía rápida sobre cómo corregir un error visual pequeño pero posiblemente molesto en WebKit cuando se usa el 100 por ciento de la altura de la ventana gráfica y al mismo tiempo se respetan las inserciones del área segura. Espero que les haya gustado este artículo, asegúrese de consultar otras guías y ejemplos interesantes que se enumeran a continuación.
