תיקון WebKit וגובה של 100 וולט
כשמשתמשים בגובה 100 אחוזים מהנוף, WebKit ולכן ספארי תיאורטית מטפלים בעיצוב בסדר גמור. אבל אם אתה רוצה לכבד גם את ריבועי האזור הבטוח, שחשובים למדי בניידים, חוסר התאמה חזותית נראה לעין.
מכיוון שאפליקציית אינטרנט מתקדמת זו משתמשת ב- Tailwind.css, אני אראה לך כיצד להשתמש נכון ב- 100 וואט בספארי בהתאמה WebKit תוך כיבוד האזור הבטוח, כך שאפליקציית האינטרנט שלך נראית מטושטשת על כל המסכים.
באמצעות תוסף PostCSS
אני ממליץ להשתמש בתוסף "postcss-100vh-fix". מכיוון שכבר הגדרת תצורת postcss עם האתחול של 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 שלך כדי לגרום לדברים לעבוד. במקום להשתמש בייבוא באמצעות "דורש", עליך להשתמש בשם החבילה כמחרוזת במערך התוספים. יתר על כן, אינך צריך לכלול את כל התוספים של 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 שלך, אך דורש קצת 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 בעת שימוש במאה אחוז מגובה הנוף תוך כיבוד של שיבוצי האזור הבטוח. אני מקווה שאהבת את המאמר הזה, הקפד לבדוק מדריכים ודוגמאות מעניינות אחרות המפורטות להלן.
