لماذا نحتاجها
الأزرار فوق النتوء تُحجب أو تتعارض مع الإيماءات. تسميها Apple (n.d.) المنطقة الآمنة، وتوصي Android (Android Developers, n.d.) بالرسم حتى الحافة مع الهوامش.
التنفيذ
استخدم viewport-fit=cover وenv() (MDN, n.d.)، وأضفها إلى الزر السفلي الثابت والتنقل السفلي، وافحص الوضع الأفقي (WCAG 2.2، 1.3.4؛ W3C, 2023).
الموضع وسهولة الوصول
يبقى الإبهام قادراً على الوصول (Bergstrom-Lehtovirta & Oulasvirta, 2014)، فلا تصغّر هدف اللمس (Parhi et al., 2006؛ Fitts, 1954).
الأسئلة الشائعة
- ألا يُرسم شيء خارجها؟
- الخلفيات تمتد للحافة، والنصوص والأزرار في الداخل.
- لماذا تعيد env() صفراً؟
- يلزم viewport-fit=cover.
تاريخ مراجعة المصادر: 2026-10-26
المراجع
- Apple. (n.d.). Layout. Human Interface Guidelines. المناطق الآمنة في iOS.
- MDN Web Docs. (n.d.). env(). Mozilla. متغيرات env() في CSS.
- Android Developers. (n.d.). Display content edge-to-edge in views. الحواف الكاملة في Android.
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. مدى الإبهام قرب الحافة.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. حجم الأهداف قرب الحواف.
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. قانون الحجم والمسافة.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. المعياران 1.3.4 و1.4.10.