หน้าจอรอยบากของ iPhone เมื่อแก้ไขด้านบนแล้วเลื่อนหน้าขึ้นหรือลงก็จะมีช่องว่างขนาดใหญ่ ไม่เป็นไร ถ้าพื้นหลังเป็นสีขาวทั้งหมด ไม่งั้นจะดูพัง น่าเกลียดมาก .
ขนาดหน้าจอไอโฟน
ความแตกต่างด้านขนาดระหว่าง iPhoneX และรุ่นอื่นๆ
สาเหตุของปัญหาข้างต้นคือ iPhoneX มีพื้นที่ปลอดภัย พื้นที่ปลอดภัยหมายถึงช่วงหน้าต่างที่มองเห็นได้ ซึ่งเนื้อหาในพื้นที่ปลอดภัยไม่ได้รับผลกระทบจากมุม ตัวเรือนเซ็นเซอร์ และไฟแสดงสถานะบ้าน ซึ่งเป็นพื้นที่สีน้ำเงินในรูปด้านล่าง : :
กล่าวอีกนัยหนึ่ง หากเราต้องการปรับตัวให้ดี เราต้องแน่ใจว่าพื้นที่ที่มองเห็นและใช้งานได้ของหน้านั้นอยู่ภายในพื้นที่ที่ปลอดภัย
สำหรับขนาดเฉพาะ โปรดดูคำแนะนำเกี่ยวกับอินเทอร์เฟซสำหรับมนุษย์ – iPhoneX
ปรับตัวอย่างไร?ขั้นตอนแรกคือการตั้งค่าเค้าโครงของหน้าเว็บในหน้าต่างภาพ
<meta name=viewport content=width=device-width, viewport-fit=cover>
คุณสมบัติใหม่ของ iOS11 เพื่อปรับให้เข้ากับ iPhoneX นั้น Apple ได้ขยายเมตาแท็กวิวพอร์ตที่มีอยู่เพื่อกำหนดเค้าโครงของหน้าเว็บในหน้าต่างภาพ สามารถตั้งค่าได้สามค่า:
หมายเหตุ: หน้าเว็บที่ไม่ได้เพิ่มส่วนขยายตามค่าเริ่มต้นคือ viewport-fit=contain หากจำเป็นต้องปรับให้เข้ากับ iPhoneX จะต้องตั้งค่า viewport-fit=cover นี่เป็นขั้นตอนสำคัญสำหรับการปรับเปลี่ยนสำหรับรายละเอียด โปรดดูที่: ตัวอธิบายพอดีวิวพอร์ต
ในขั้นตอนที่สอง เนื้อหาหลักของหน้าจะถูกจำกัดไว้เฉพาะพื้นที่ปลอดภัย
.post { padding: 12px; padding-left: env (safe-area-inset-left); ช่องว่างภายใน: const (safe-area-inset-left); ); ช่องว่างภายใน: const(safe-area-inset-right);} ฟังก์ชั่นคงที่คุณสมบัติใหม่ของ iOS11 ซึ่งเป็นฟังก์ชัน CSS ของ Webkit ใช้เพื่อกำหนดระยะห่างระหว่างพื้นที่ปลอดภัยและขอบเขต มีตัวแปรที่กำหนดไว้ล่วงหน้าสี่ตัว:
หมายเหตุ: เบราว์เซอร์บางตัวไม่รองรับฟังก์ชันคงที่อีกต่อไป และใช้ฟังก์ชัน env แทน
โดยค่าเริ่มต้น ถ้าไคลเอนต์จัดการโซนความปลอดภัย ผลจะเป็นดังนี้:
หลังจากใช้แอตทริบิวต์ viewport-fit=cover แบบเต็มหน้าจอ:
แผนที่พื้นที่ปลอดภัย:
แสดงผลหลังจากจำกัดพื้นที่ปลอดภัย:
ระยะห่างจากขอบถูกตั้งค่าไว้ที่ 12 พิกเซลด้านบน หากหมุนทิศทาง:
ขั้นตอนที่สามคือการใช้เมธอด min() และ max()
@supports(padding: สูงสุด (0px)) { .post { padding-left: สูงสุด (12px, env (safe-area-inset-left)); padding-right: สูงสุด (12px, env (safe-area-inset- ขวา)); }} แก้ไขปัญหาองค์ประกอบคงที่
หากใช้ชื่อหน้าในส่วนหน้าและกำหนดไว้ที่ด้านบน ชื่อนั้นจะถูกบล็อก ในขณะนี้ คุณสามารถตั้งค่าบนสุดเป็นค่าระยะห่างที่ปลอดภัยได้ เช่น:
.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}บทความอ้างอิง: การออกแบบเว็บไซต์สำหรับ iPhone X
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network