มาดูกันว่า iPhone X รุ่นใดมีหน้าตาเป็นอย่างไรก่อน
ในภาพด้านบน โมเดล Iphonex มีพื้นที่ใหม่สองส่วนนี้ที่ส่วนหัวและด้านล่าง ดังนั้นเราจึงจำเป็นต้องทำการปรับเปลี่ยนบางอย่างสำหรับโมเดลประเภทนี้เพื่ออำนวยความสะดวกในการแสดงเว็บแอปของเรา
สำหรับหน้ามือถือที่ทำจาก h5 เค้าโครงทั่วไปคือโหมดหัว + ลำตัว + ด้านล่างสามคอลัมน์ ตำแหน่งส่วนหัวและด้านบนจะคงที่ และเนื้อหาในลำตัวสามารถเลื่อนได้ เค้าโครงเบื้องต้นมีดังนี้:
<div class=page> <header></header> <main></main> <footer></footer> </div>
อย่างไรก็ตาม หากคุณไม่ได้ใช้แอตทริบิวต์ css ใหม่ของ Iphone ในสถานการณ์นี้ แถบนำทางที่ด้านล่างจะถูกบล็อกโดยไฟหายใจที่มาพร้อมกับ Iphone ลองตรวจสอบวิธีแก้ปัญหาหลายประการแล้ว
ฉันใช้ vue framework ในหน้า index.html เราจำเป็นต้องเพิ่ม
<meta name=viewport content=width=device-width,viewport-fit=cover>
จากนั้น ในหน้า app.vue สาธารณะ การแสดงส่วนประกอบแต่ละรายการจะถูกแทนที่ด้วยมุมมองเราเตอร์ที่นี่ เพื่อให้สามารถประมวลผลแถบส่วนหัวสาธารณะได้ที่นี่ รูปแบบเฉพาะมีดังนี้:
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></แม่แบบ>ในโครงร่างด้านบน เราเขียนสิ่งต่อไปนี้สำหรับ div ด้วยคลาส placeholder_top:
.placeholder_top { ตำแหน่ง: คงที่; ด้านบน: 0; ความกว้าง: 10rem; สีพื้นหลัง: #303030; ความสูง: คงที่ (safe-area-inset-top); ); ดัชนี z: 999;}ในกรณีนี้ เราจะไม่ต้องจัดการกับปัญหาแถบด้านบนสำหรับส่วนประกอบที่แยกจากกันอีกต่อไป ต่อไป เราจะจัดการกับปัญหาส่วนหัวที่กล่าวถึงข้างต้น โดยทั่วไป ส่วนหัวส่วนใหญ่จะห่อหุ้มเป็นส่วนประกอบสาธารณะ ดังนั้นใน เนื่องจากอิทธิพลขององค์ประกอบที่เราแทรกไว้ในหน้า app.vue วิธีการเขียน CSS ของ head ของเราจึงจำเป็นต้องได้รับการแก้ไขเล็กน้อย เค้าโครงหน้าของส่วนประกอบ head จะเป็นดังนี้:
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> เนื้อหาการนำทาง</div> <div class=placeholder></div> </header></ แม่แบบ>CSS ของหน้าคือ:
ส่วนหัว {สีพื้นหลัง: #303030; .title{ ตำแหน่ง: คงที่; top:0; top: คงที่(safe-area-inset-top); top: env(safe-area-inset-top); ความสูง: 88px; ดัชนี z: 999; } .placeholder { ความสูง: 88px;เขียนในลักษณะนี้แถบนำทางส่วนหัวจะอยู่ใต้แถบสถานะของโทรศัพท์มือถือจะไม่ส่งผลกระทบต่อหน้าต่างและเข้ากันได้กับรุ่น Android และ iOS (ปัญหาความเข้ากันได้ดังกล่าวยังเกี่ยวข้องกับปัญหาระบบ iOS แต่บทความนี้ยังไม่มี ที่เกี่ยวข้อง)
ตอนนี้เรามาดูการประมวลผลของพื้นที่หลักกัน เนื่องจากส่วนประกอบส่วนหัวด้านบนได้รับการประมวลผลแล้ว เค้าโครงหลักจึงเป็นดังนี้:
main {padding-top: ค่าคงที่ (safe-area-inset-top); padding-top: env (safe-area-inset-top); padding-bottom: calc (88px + ค่าคงที่ (safe-area-inset-bottom) );padding-bottom: calc(88px + env(safe-area-inset-bottom));PS: ให้ฉันอธิบายที่นี่ สองบรรทัดต่อไปนี้จะใช้เมื่อหน้าปัจจุบันไม่มีแถบนำทางด้านล่าง
padding-bottom: ค่าคงที่ (พื้นที่ปลอดภัย-inset-bottom); padding-bottom: env (safe-area-inset-bottom);},
เค้าโครงหลักพร้อมแล้วเพียงเขียนเนื้อหาโดยตรง
จากนั้นดูเค้าโครงส่วนท้ายที่ด้านล่าง
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> เนื้อหาด้านล่าง</div></footer></template>CSS ของเนื้อหาด้านล่างมีดังนี้:
ส่วนท้าย {ตำแหน่ง: คงที่; ด้านล่าง: 0; ความกว้าง: 10rem; ความสูง: คำนวณ (88px + ค่าคงที่ (พื้นที่ปลอดภัย-inset-bottom)); ด้านล่าง)); สีพื้นหลัง: #303030; .foot{ ตำแหน่ง: สัมบูรณ์; ด้านบน: 0; ความกว้าง: 10rem; 88px; }}เขียนในลักษณะนี้ เนื้อหาในฐานนำทางด้านล่างจะไม่ถูกปิดกั้นโดยไฟช่วยหายใจที่มาพร้อมกับโทรศัพท์
ดังนั้นเราสามารถสรุปได้ว่าวิธีเขียน CSS ที่เราอาจจำเป็นต้องใช้ในการปรับ WebApp ประเภทนี้มีดังนี้:
ตำแหน่ง: คงที่; ด้านบน: คงที่ (พื้นที่ปลอดภัย-แทรก-ด้านบน); ด้านบน: env (พื้นที่ปลอดภัย-แทรก-ด้านบน); -inset-bottom); ด้านบน: calc (1rem + ค่าคงที่ (safe-area-inset-top)); ด้านบน: calc (1rem + env (safe-area-inset-top)); คำนวณ (1rem + ค่าคงที่ (พื้นที่ปลอดภัย-แทรก-ด้านล่าง)); ด้านล่าง: คำนวณ (1rem + env (พื้นที่ปลอดภัย-แทรก-ด้านล่าง));
ป.ล.: ในการเขียนข้างต้นมีการเขียนว่า: style={position:fixposition?'absolute':'fixed'} นี่คือการแก้ปัญหาการวางตำแหน่งที่ไม่ถูกต้องขององค์ประกอบคงที่เมื่อผู้ใช้คลิกที่ช่องป้อนข้อมูลและ ซอฟท์คีย์บอร์ดปรากฏขึ้น หากคุณสนใจ คุณสามารถศึกษาได้ บทความนี้จะไม่กล่าวถึงในตอนนี้
สามารถใช้วิธีการเขียนที่แตกต่างกันได้ตามความต้องการที่แท้จริง ขอแนะนำว่าอย่าเบี่ยงเบนไปจากตรรกะโครงร่างทั่วไปมากเกินไป มันถูกเขียนด้วยวิธีนี้เพื่อการประมวลผลแบบครบวงจรและการบำรุงรักษาที่สะดวก นอกจากนี้ หากมีการทดสอบเครื่องจักรจริงและปัญหาด้านรูปแบบ เกิดจากความเข้ากันได้ของโครงร่าง สามารถใช้การดีบักเครื่องจริงได้ วิธีการคือใช้เบราว์เซอร์พีซีเพื่อดีบักเว็บแอปและตรวจสอบองค์ประกอบ โดยทั่วไปสามารถแก้ปัญหาสไตล์ส่วนใหญ่เกี่ยวกับการดีบักเครื่องจริงได้ ฉันจะเขียนเกี่ยวกับเรื่องนี้ คราวหน้า.
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network