دعونا نلقي نظرة على الشكل الذي يبدو عليه طراز iPhone X أولاً
في الصورة أعلاه، يحتوي طراز Iphonex على هاتين المنطقتين الجديدتين في الأعلى والأسفل، لذلك نحتاج إلى إجراء بعض التعديلات على هذا النوع من النماذج لتسهيل عرض تطبيق الويب الخاص بنا.
بالنسبة لصفحات الهاتف المحمول المصنوعة من h5، يكون التخطيط الشائع هو وضع الرأس + الجذع + الأسفل بثلاثة أعمدة. يتم وضع الرأس والأعلى بشكل ثابت، ويمكن تمرير المحتوى الموجود في الجذع كما يلي:
<div class=page> <header></header> <main></main> <footer></footer> </div>
ومع ذلك، إذا كنت لا تستخدم سمات CSS الجديدة لجهاز Iphone، في هذه الحالة، يتم حظر شريط التنقل في الأسفل بواسطة ضوء التنفس الذي يأتي مع Iphone راجع عدة حلول
أنا أستخدم إطار عمل vue في صفحة Index.html، نحتاج إلى الإضافة
<اسم التعريف = محتوى منفذ العرض = العرض = عرض الجهاز، منفذ العرض الملائم = الغلاف>
بعد ذلك، في صفحة app.vue العامة، يتم استبدال عرض كل مكون من مكوناتنا بعرض جهاز التوجيه هنا، بحيث يمكن معالجة شريط الرأس العام هنا، ويكون التخطيط المحدد كما يلي:
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /ديف></قالب>في المخطط أعلاه، نكتب ما يلي لـ div مع الصنف placeholder_top:
.placeholder_top { الموضع: ثابت؛ الارتفاع: 0؛ عرض الخلفية: #303030؛ الارتفاع: ثابت (منطقة آمنة-داخل-أعلى)؛ );}في هذه الحالة، لن نضطر بعد الآن إلى التعامل مع مشكلة الشريط العلوي للمكونات المنفصلة في المستقبل، وبعد ذلك، يمكننا التعامل مع مشكلة الرأس المذكورة سابقًا. بشكل عام، سيتم تغليف معظم الرؤوس في مكونات عامة، لذلك هنا، نظرًا لتأثير العنصر الذي أدخلناه في صفحة app.vue، فإن طريقة كتابة CSS لرأسنا تحتاج أيضًا إلى تعديل طفيف، ويكون تخطيط الصفحة لمكون الرأس كما يلي:
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> محتوى التنقل</div> <div class=placeholder></div> </header></ القالب>CSS للصفحة هو:
header{background-color: #303030; الارتفاع: 88 بكسل; مؤشر z: 999; .placeholder{ الارتفاع: 88 بكسل;مكتوبًا بهذه الطريقة، سيكون شريط التنقل الرئيسي موجودًا أسفل شريط حالة الهاتف المحمول، ولن يؤثر على النافذة، وهو متوافق مع طرز Android وiOS (تتضمن مشكلات التوافق هذه أيضًا مشكلات في النظام مع iOS، ولكن هذه المقالة ليس بعد متضمن)
الآن دعونا نلقي نظرة على معالجة المنطقة الرئيسية، نظرًا لأنه تمت معالجة مكون الرأس أعلاه، فإن التخطيط الرئيسي هو كما يلي:
رئيسي {الحشوة العلوية: ثابت (المنطقة الآمنة الداخلية للأعلى)؛ الحشوة العلوية: env (المنطقة الآمنة الداخلية لأعلى)؛ الحشوة السفلية: كالك (88px + ثابت (المنطقة الآمنة الداخلية للأسفل) );padding-bottom: calc(88px + env(safe-area-inset-bottom));ملاحظة: اسمحوا لي أن أشرح هنا أنه يتم استخدام السطرين التاليين عندما لا تحتوي الصفحة الحالية على شريط تنقل سفلي.
الحشو السفلي: ثابت (المنطقة الآمنة الداخلية للأسفل)؛ الحشو السفلي: env (المنطقة الآمنة الداخلية للأسفل)؛}،
التصميم الرئيسي جاهز، فقط قم بكتابة المحتوى مباشرة.
ثم انظر إلى تخطيط التذييل في الأسفل
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> المحتوى السفلي</div></footer></template>CSS للمحتوى السفلي هو كما يلي:
تذييل {الموضع: ثابت أسفل: 0؛ العرض: 10rem الارتفاع: calc(88px + Constant(safe-area-inset-bottom)); أسفل))؛ لون الخلفية: #303030. القدم {الموضع: مطلق؛ الأعلى: 0؛ 88بكسل; }}مكتوبًا بهذه الطريقة، لن يتم حظر المحتوى الموجود في أسفل شريط التنقل بواسطة ضوء التنفس الذي يأتي مع الهاتف.
لذلك يمكننا تلخيص أن طريقة كتابة CSS التي قد نحتاج إلى استخدامها في هذا النوع من التكيف مع تطبيق الويب هي كما يلي:
الموضع: ثابت؛ الجزء العلوي: ثابت (منطقة آمنة-داخل-أعلى)؛ -inset-bottom); top: calc(1rem + Constant(safe-area-inset-top)); top: calc(1rem + env(safe-area-inset-top)); calc(1rem + ثابت(منطقة آمنة-داخل-أسفل)); calc(1rem + env(منطقة آمنة-داخل-أسفل));
ملاحظة: مكتوب في الكتابة أعلاه: style={position:fixposition?'absolute':'fixed'}. هذا لحل مشكلة تحديد الموضع غير الدقيق لهذه العناصر الثابتة عندما ينقر المستخدم على مربع الإدخال و تنبثق لوحة المفاتيح الناعمة إذا كنت مهتمًا، فيمكنك دراستها ولن تناقشها هذه المقالة في الوقت الحالي.
يمكن استخدام طرق كتابة مختلفة وفقًا للاحتياجات الفعلية. يوصى بعدم الانحراف كثيرًا عن منطق التخطيط العام، كما أنه مكتوب بهذه الطريقة للمعالجة الموحدة والصيانة المريحة، بالإضافة إلى ذلك، إذا كان هناك اختبار حقيقي للآلة ومشاكل في الأسلوب بسبب توافق التخطيط، يمكن استخدام تصحيح أخطاء الجهاز الحقيقي. الطريقة هي استخدام متصفح الكمبيوتر لتصحيح أخطاء تطبيق الويب ومراجعة العناصر، وهذا يمكن أن يحل بشكل أساسي معظم مشكلات النمط، وسأكتب عن تصحيح أخطاء الجهاز الحقيقي في المرة القادمة.
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.