إن مفتاح التكيف مع IphoneX هو كيفية تكييف الصفحة مع الشقوق ومنطقة التشغيل السفلية والزوايا المستديرة الكبيرة.
بالمقارنة مع الهواتف المحمولة الأخرى، فإن الفرق بين IphoneX هو أنه على الرغم من أن الجهاز يحتوي أيضًا على شاشة واحدة، إلا أنه في الواقع مقسم إلى عدة وحدات، انظر الشكل أدناه للحصول على التفاصيل:
عندما ننقل صفحة ويب عادية إلى X، يكون التأثير هو عرض المحتوى فقط في المنطقة الآمنة، ولا يوجد محتوى ويب في المنطقة غير الآمنة، وهذا يعني ظهور كتل بيضاء في الأعلى والأسفل للتعامل معها؟
حل 1. أضف لون الخلفية للجسملماذا تضيف لون الخلفية؟ ما الفائدة؟ لاحظ أنه ستكون هناك بقع بيضاء على الرأس والأسفل التي ذكرناها للتو، وفي الواقع، ليس من الدقة أن نقول إنه أبيض، لأن هذا اللون يأتي في الواقع من لون خلفية الجسم. بالإضافة إلى ذلك، عندما نقوم بسحب المحتوى لأعلى أو لأسفل، سيتم عرض المحتوى واللون الموجود أسفل صفحة الويب، وهو في الواقع لون خلفية الجسم. لذا، إذا كنت تريد تعديل هذين التأثيرين، يمكنك ضبط لون خلفية الجسم.
2. أضف علامة <meta> الخاصة بـ viewport-fit = Coverهذه الخطوة حرجة للغاية. دعونا نلقي نظرة على النتائج أولا:
نسخ الرمز