إصلاح WebKit وارتفاع 100vh
عند استخدام ارتفاع منفذ العرض بنسبة 100 في المائة ، يتعامل WebKit وبالتالي Safari نظريًا مع التصميم بشكل جيد. ولكن إذا كنت ترغب أيضًا في احترام الأجزاء الداخلية للمنطقة الآمنة ، والتي تعتبر مهمة جدًا على الهاتف المحمول ، فسيظهر عدم تناسق مرئي.
نظرًا لأن تطبيق الويب التقدمي هذا يستخدم Tailwind.css ، فسأوضح لك كيفية استخدام WebKit 100vh بشكل صحيح في Safari على التوالي مع احترام المنطقة الآمنة أيضًا ، بحيث يبدو تطبيق الويب الخاص بك رائعًا على جميع الشاشات.
باستخدام PostCSS-plugin
أوصي باستخدام البرنامج المساعد "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-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;
}
وقد انتهينا
تقدم هذه المقالة دليلاً سريعًا حول كيفية إصلاح خطأ مرئي صغير ولكنه مزعج على WebKit عند استخدام 100 بالمائة من ارتفاع منفذ العرض مع مراعاة العناصر الداخلية للمنطقة الآمنة. آمل أن تكون هذه المقالة قد أعجبتك ، تأكد من مراجعة الأدلة والأمثلة الأخرى المثيرة للاهتمام المدرجة أدناه
