จำลอง Safe Area ของ iPhone และสร้าง CSS
เปรียบเทียบระยะขอบ safe area ของ iPhone ในแนวตั้งและแนวนอน ดูตัวอย่างการซ้อนทับของปุ่มที่ตรึงตำแหน่ง แล้วคัดลอกโค้ด CSS หรือ Tailwind ที่รองรับหลายขนาดหน้าจอ
ทำงานในเบราว์เซอร์ · ไม่ต้องมีบัญชี
เป็นเพียงแผนภาพ ช่องกล้องและมุมหน้าจอใช้เพื่อประกอบการอธิบายเท่านั้น
ระยะเว้นขอบอ้างอิง pt
- บน
- 0
- ขวา
- 84
- ล่าง
- 34
- ซ้าย
- 0
- ขนาดหน้าจอเชิงตรรกะ
- 466 × 678 pt
- ขนาดพื้นที่ปลอดภัย
- 382 × 644 pt
- ความละเอียดจริงของจอ
- 1398 × 2034 px
- อัตราส่วนการเรนเดอร์
- 3×
อัปเดตข้อมูลแล้ว
ขนาดเชิงตรรกะและระยะเว้นขอบของ iPhone Duo อ้างอิงจากเครื่องจำลอง iOS 27.1 โดยแนวนอนใช้เลย์เอาต์แนวนอนหมุนไปทางซ้าย จอด้านในยังคงแสดงแถบสถานะ บล็อกสีเข้มแสดงพื้นที่ที่ระบบสงวนไว้ ขนาดเลย์เอาต์ในเครื่องจำลอง 669 × 951 pt และความละเอียดแผงจออย่างเป็นทางการ 1878 × 2670 px เป็นค่าคนละชุด ไม่ใช่การแปลงตรง ๆ ด้วยตัวคูณ 3× หน้านี้แสดงสถานะกางออกสุดและพับปิด ไม่ใช่ค่าที่วัดจากอุปกรณ์จริง
โค้ดเลย์เอาต์แบบปรับตามหน้าจอ
โค้ดใช้ค่า env() ปัจจุบัน ไม่ใช่ค่าคงที่ของอุปกรณ์ที่เลือก การปรับระยะห่างจะเปลี่ยนโค้ดผลลัพธ์ ส่วนสวิตช์สาธิตใช้เปรียบเทียบเลย์เอาต์เท่านั้น หน้านี้เว้นพื้นที่สำหรับแถบที่ตรึงไว้และปุ่มขนาด 44px โปรดทดสอบเนื้อหาที่สูงขึ้น รวมถึงการทำงานใน Safari และ PWA ในโปรเจกต์ของคุณ
พื้นที่ปลอดภัยของเบราว์เซอร์นี้
กำลังอ่านค่าจากเบราว์เซอร์…
ค่า CSS px ปัจจุบันจากเบราว์เซอร์นี้ ซึ่งไม่ขึ้นกับค่าสำเร็จรูปที่เลือก ค่าเป็นศูนย์อาจถูกต้องบนคอมพิวเตอร์หรือในวิวพอร์ตสี่เหลี่ยม ค่าต่าง ๆ อาจเปลี่ยนเมื่อหมุนหรือปรับขนาดหน้าจอ ฟีเจอร์นี้ไม่ได้ระบุรุ่นอุปกรณ์หรือจำลอง Safari
ตารางอ้างอิงพื้นที่ปลอดภัยของ iPhone
ค่าแนวตั้งในหน่วยพอยต์เชิงตรรกะ (pt) ที่ระดับซูมหน้าจอมาตรฐานและแสดงแถบสถานะ ขนาดพื้นที่ปลอดภัยคำนวณโดยลบระยะเว้นขอบทั้งสองด้านที่เกี่ยวข้องออกจากขนาดหน้าจอเชิงตรรกะ ค่าสำเร็จรูปไม่อาจทดแทนการทดสอบบนอุปกรณ์จริงได้
| อุปกรณ์ | ขนาดหน้าจอเชิงตรรกะ | บน (pt) | ล่าง (pt) | ซ้าย (pt) | ขวา (pt) | ขนาดพื้นที่ปลอดภัย |
|---|---|---|---|---|---|---|
| iPhone Duo · จอนอก · พับปิด | 466 × 678 | 0 | 34 | 0 | 84 | 382 × 644 |
| iPhone Duo · จอใน · กางออก | 669 × 951 | 82 | 34 | 0 | 0 | 669 × 835 |
| iPhone 16 Pro | 402 × 874 | 62 | 34 | 0 | 0 | 402 × 778 |
| iPhone 16 Pro Max | 440 × 956 | 62 | 34 | 0 | 0 | 440 × 860 |
| iPhone 14 Pro | 393 × 852 | 59 | 34 | 0 | 0 | 393 × 759 |
| iPhone 13 mini | 375 × 812 | 50 | 34 | 0 | 0 | 375 × 728 |
| iPhone 12 | 390 × 844 | 47 | 34 | 0 | 0 | 390 × 763 |
| iPhone 11 | 414 × 896 | 48 | 34 | 0 | 0 | 414 × 814 |
| iPhone X | 375 × 812 | 44 | 34 | 0 | 0 | 375 × 734 |
| iPhone SE (3rd gen) | 375 × 667 | 20 | 0 | 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) ร่วมกับระยะห่างที่คุณกำหนด ค่าคงที่ไม่ปรับตามแนวนอน อุปกรณ์อื่น หรือสภาพแวดล้อมเบราว์เซอร์ที่ต่างกัน
เครื่องมือที่เกี่ยวข้อง
อัปเดตหน้าเครื่องมือเมื่อ: