กุญแจสำคัญในการปรับ IphoneX คือการปรับหน้ากระดาษให้เข้ากับรอยบาก พื้นที่ปฏิบัติการด้านล่าง และมุมโค้งมนขนาดใหญ่
เมื่อเปรียบเทียบกับโทรศัพท์มือถือรุ่นอื่นๆ ความแตกต่างระหว่าง IphoneX ก็คือ แม้ว่าอุปกรณ์จะมีหน้าจอเดียว แต่จริงๆ แล้วแบ่งออกเป็นหลายโมดูล ดูภาพด้านล่างเพื่อดูรายละเอียด
เมื่อเราย้ายหน้าเว็บปกติไปที่ X เนื้อหาจะแสดงเฉพาะในพื้นที่ปลอดภัย และไม่มีเนื้อหาเว็บในพื้นที่ที่ไม่ปลอดภัย นั่นหมายความว่าบล็อกสีขาวจะปรากฏที่ส่วนหัวและด้านล่างอย่างไร ที่จะจัดการกับมัน?
สารละลาย 1. เพิ่มสีพื้นหลังให้กับร่างกายทำไมต้องเพิ่มสีพื้นหลัง? มีประโยชน์อะไร? สังเกตว่าจะมีรอยสีขาวบนหัวและก้นที่เราเพิ่งพูดถึงไป จริงๆ แล้วบอกไม่ถูกว่าเป็นสีขาว เพราะจริงๆ แล้วสีนี้มาจากสีพื้นหลังของลำตัว นอกจากนี้เมื่อเราดึงเนื้อหาขึ้นหรือลงเนื้อหาและสีที่ด้านล่างของหน้าเว็บก็จะปรากฏขึ้นซึ่งจริงๆแล้วเป็นสีพื้นหลังของเนื้อหา ดังนั้นหากคุณต้องการแก้ไขเอฟเฟกต์ทั้งสองนี้ คุณสามารถตั้งค่าสีพื้นหลังของร่างกายได้
2. เพิ่มแท็ก <meta> ของ viewport-fit = coverขั้นตอนนี้มีความสำคัญอย่างยิ่ง มาดูผลลัพธ์กันก่อน:
คัดลอกรหัส