تم نسخ كود CSS بنجاح
أدوات المصممين
عارض المنطقة
الآمنة
تحقق من تصميماتك ضد مناطق الآمان لجميع أجهزة Apple. شاهد بالضبط أين يجب تجنب وضع العناصر التفاعلية والمحتوى المهم.
المعاينة المباشرة
430 × 932 ptشريط الحالة
الجزيرة / النوتش
مؤشر الصفحة الرئيسية
منطقة المحتوى
الهوامش الجانبية
كود CSS الجاهز للاستخدام
/* iPhone 15 Pro Max — Portrait */
/* أضف هذا في */
.safe-area-container {
padding-top: env(safe-area-inset-top, 59px);
padding-bottom: env(safe-area-inset-bottom, 34px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
/* لشريط تنقل ثابت أسفل الشاشة */
.bottom-bar {
padding-bottom: env(safe-area-inset-bottom, 34px);
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
/* لتجنب المحتوى تحت الجزيرة الديناميكية */
@supports (padding-top: env(safe-area-inset-top)) {
.content {
padding-top: env(safe-area-inset-top);
}
}
نصائح لتصميم يتوافق مع المنطقة الآمنة
1
استخدم env() بدل القيم الثابتة
استبدل القيم الصلبة بـ env(safe-area-inset-*) حتى يتكيف تصميمك تلقائياً مع كل جهاز.
2
أضف viewport-fit=cover
بدون هذه الخاصية في meta viewport، لن تمتد صفحتك لكل الشاشة ولن تحتاج للمنطقة الآمنة أصلاً.
3
لا تضع أزراراً تحت الجزيرة الديناميكية
المستخدمون يعتادون السحب من الأسفل للتبديل بين التطبيقات — تجنب وضع عناصر تفاعلية قرب الحواف.
4
اختبر في الوضعين عمودي وأفقي
الهوامش الجانبية تظهر بقوة في الوضع الأفقي خاصة على أجهزة iPhone مع الجزيرة الديناميكية.
TAG STUDIO
تحتاج تصميم يتوافق مع كل الأجهزة؟
فريق تصميم Tag Studio ينتج واجهات مستخدم محسّنة لكل شاشة — من iPhone SE إلى iPad Pro.
تواصل معنا