Исправление WebKit и высоты 100vh
При использовании 100-процентной высоты области просмотра WebKit и, следовательно, Safari теоретически отлично справляются со стилем. Но если вы также хотите соблюдать вставки безопасной зоны, которые очень важны на мобильных устройствах, визуальная несогласованность становится заметной.
Поскольку это прогрессивное веб-приложение использует Tailwind.css, я покажу вам, как правильно использовать 100vh в Safari или WebKit, при этом соблюдая безопасную зону, чтобы ваше веб-приложение выглядело стильно на всех экранах.
Использование PostCSS-плагина
Я рекомендую использовать плагин «postcss-100vh-fix». Поскольку вы уже настроили postcss-config с инициализацией Tailwind, это решение подходит вполне естественно и требует минимум времени для устранения проблемы с высотой области просмотра.
// 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
Если вы используете Tailwind с Next.js, необходимо внести небольшие изменения в конфигурацию 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, но требует некоторого 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;
}
И мы закончили
В этой статье содержится краткое руководство по исправлению небольшой, но, возможно, раздражающей визуальной ошибки в WebKit при использовании 100% высоты области просмотра и соблюдении вставок в безопасной области. Надеюсь, вам понравилась эта статья, обязательно ознакомьтесь с другими интересными руководствами и примерами, перечисленными ниже.
