محاكي المنطقة الآمنة في iPhone ومولد CSS

اعرض هوامش iPhone الآمنة بالطول والعرض، وقارن تداخل الأزرار الثابتة وانسخ كود CSS أو Tailwind.

يعمل في المتصفح · دون تسجيل

الجهاز

اتجاه الشاشة

إظهار المناطق

رسم توضيحي؛ الكاميرا والزوايا ليست حدودًا دقيقة للجهاز.

هوامش مرجعية pt

أعلى: 0
يمين: 84
أسفل: 34
يسار: 0

الشاشة المنطقية: 466 × 678 pt
الأبعاد الآمنة: 382 × 644 pt
الدقة الأصلية: 1398 × 2034 px
مقياس العرض: 3×

حول هذه القيم

تحديث البيانات 2026-09-26

تباعد المحتوى16 px

تستخدم الأبعاد المنطقية وهوامش iPhone Duo مراجع محاكي iOS 27.1، والوضع الأفقي بدوران إلى اليسار. تحتفظ الشاشة الداخلية بشريط الحالة، وتمثل الكتل الداكنة مناطق النظام المحجوزة. أبعاد المحاكي 669 × 951 pt والدقة المادية الرسمية 1878 × 2670 px قيمتان منفصلتان، وليستا تحويلًا مباشرًا بمقدار 3×. يعرض المثال حالتي الفتح الكامل والإغلاق، ولا يمثل قياسات جهاز فعلي.

كود تخطيط متكيف

يستخدم قيم env() الحالية بدل أرقام الجهاز الثابتة. يغيّر التباعد الكود؛ المفتاح للمقارنة فقط. تُحجز مساحة للشريط الثابت وزر بارتفاع 44px. اختبر المحتوى الأطول وSafari وتطبيقات PWA في مشروعك.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

<style>
  .safe-page {
    box-sizing: border-box;
    min-height: 100dvh;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
  }
  .safe-bottom-bar {
    position: fixed;
    inset: auto 0 0;
    box-sizing: border-box;
    padding: 16px;
    padding-right: calc(16px + env(safe-area-inset-right, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(16px + env(safe-area-inset-left, 0px));
    background: #fff;
    color: #171717;
  }
  .safe-bottom-bar button { min-height: 44px; width: 100%; }
</style>

<main class="safe-page"><!-- Page content --></main>
<footer class="safe-bottom-bar"><button>Continue</button></footer>

المنطقة الآمنة لهذا المتصفح

جارٍ قراءة قيم المتصفح…

قيم CSS px الحالية لهذا المتصفح، مستقلة عن الجهاز المختار. قد تكون القيمة 0 صحيحة على الكمبيوتر أو في مساحة مستطيلة. قد تتغير عند التدوير أو تغيير الحجم. لا تحدد جهازك ولا تحاكي Safari.

جدول المناطق الآمنة في iPhone

قيم الوضع الطولي بالنقاط المنطقية (pt)، بالتكبير القياسي مع ظهور شريط الحالة. تُحسب الأبعاد الآمنة بطرح الهامشين المقابلين من حجم الشاشة المنطقي. تحقّق أيضًا على أجهزة فعلية.

جدول المناطق الآمنة في iPhone — طولي
الجهاز	الشاشة المنطقية	أعلى (pt)	أسفل (pt)	يمين (pt)	الأبعاد الآمنة
iPhone Duo · الشاشة الخارجية · مغلق	466 × 678	0	34	84	382 × 644
iPhone Duo · الشاشة الداخلية · مفتوح	669 × 951	82	34	0	669 × 835
iPhone 16 Pro	402 × 874	62	34	0	402 × 778
iPhone 16 Pro Max	440 × 956	62	34	0	440 × 860
iPhone 14 Pro	393 × 852	59	34	0	393 × 759
iPhone 13 mini	375 × 812	50	34	0	375 × 728
iPhone 12	390 × 844	47	34	0	390 × 763
iPhone 11	414 × 896	48	34	0	414 × 814
iPhone X	375 × 812	44	34	0	375 × 734
iPhone SE (3rd gen)	375 × 667	20	0	0	375 × 647

طريقة الاستخدام

اختر الجهاز والاتجاه لعرض الأبعاد والهوامش المرجعية.
في عرض التخطيط، بدّل الهوامش وعدّل التباعد لمقارنة موضع الزر.
انسخ CSS أو Tailwind واختبره في المتصفح والجهاز المستهدفين.

مثال

padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));

التفاصيل والقيود

تختلف CSS px عن النقاط الأصلية والبكسلات الفعلية. يعرض iPhone 13 mini بمقياس 3× ثم يصغّر إلى دقته الأصلية.

قد تتغير الهوامش حسب النظام والتكبير وأشرطة المتصفح والتخطيط. الرسم ليس قالب تصميم دقيقًا.

FAQ

لماذا يعرض المتصفح 0px؟

قد لا تحتاج المساحة المستطيلة إلى هوامش. اختيار إعداد iPhone لا يغيّر بيئة المتصفح الفعلية.

هل يمكن تثبيت الهامش السفلي عند 34px؟

استخدم env(safe-area-inset-bottom, 0px) مع التباعد المطلوب للتكيف مع الأجهزة والاتجاهات الأخرى.

تاريخ تحديث صفحة الأداة: 2026-09-26