פאַרריכטן פֿאַר די 100 ווה וועבקיט אין טאַילווינד

פיקסיר וועבקיט און אַ הייך פון 100 ווה

ווען איר נוצן 100% די הייך פון די Viewport, WebKit און Safari סאַפּאָרץ סטילינג די סטילינג פּונקט פייַן. אָבער אויב איר אויך ווילן צו אָנערקענען די זיכער ינסעץ, וואָס זענען גאַנץ וויכטיק אויף רירעוודיק, אַ וויזשאַוואַל ינקאַנסאַטאַנס איז קענטיק.

ווי דאָס פּראָגרעסיוו וועב אַפּ ניצט Tailwind.css, איך וועט ווייַזן איר ווי צו נוצן 100 ווה ריכטיק אין Safari ריספּעקטיוולי וועבקיט און אויך ריספּעקטינג די זיכער געגנט, אַזוי אַז אייער וועב אַפּ קוקט פראַנטלי אויף אַלע סקרינז.

ניצן אַ PostCSS-פּלוגין

איך רעקאָמענדירן צו נוצן די פּלוגין "postcss-100vh-fix" פּלוגין. ווי איר האָט שוין שטעלן אַרויף אַ postcss-config מיט Tailwind ס יניטיאַליזאַטיאָן, די לייזונג פיץ גאַנץ נאַטירלעך און ניצט די מינדסטער צייט צו פאַרריכטן די הייך פון די Viewport הייך.

// 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-config צו מאַכן טינגז אַרבעט. אַנשטאָט ניצן ימפּאָרץ דורך "ריקוויירז", איר האָבן צו נוצן די נאָמען פון דעם פּעקל ווי אַ שטריקל אין די מענגע פון פּלוגינס. דערצו, איר טאָן ניט האָבן צו אַרייַננעמען אַלע פון 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 פּראָצענט פון די הייך פון די ViewPort און אויך אָנערקענען די ינסעץ פון די זיכערע געגנט. איך האָפֿן איר לייקט דעם אַרטיקל, טשעק זיכער אנדערע טשיקאַווע גוידעס און ביישפילן ליסטעד אונטן.