ปัจจุบัน นักออกแบบ APP จำนวนมากเริ่มหันมาใช้การพัฒนาส่วนหน้าของ H5 แต่การแก้ปัญหาการปรับตัวสำหรับ iPhone และ Android ทุกรุ่นถือเป็นสิ่งสำคัญสูงสุดของเรา ไม่ว่าคุณจะออกแบบ APP หรือเขียน Front-End H5 คุณต้องคำนึงถึงความเข้ากันได้ของอุปกรณ์เคลื่อนที่
ตั้งแต่ไอโฟน
1. แถบด้านบน
ไคลเอนต์ก่อนหน้านี้ใช้วิธีการ 20pt สำหรับแถบสถานะ + 44pt สำหรับแถบนำทางเสมอ ตั้งแต่ไอโฟน
2. แถบการทำงานด้านล่าง
ตั้งแต่ไอโฟน ในขณะนี้ พื้นที่ปลอดภัยจะต้องเหลือไว้ที่ด้านล่าง และบรรทัดล่างสุดของเนื้อหาหน้าควรอยู่ที่มุมของโทรศัพท์มือถือ ความสูงของพื้นที่ปลอดภัยนี้คือ 34pt
3. วิธีการปรับตัว
โดยสรุป จากพารามิเตอร์โทรศัพท์มือถือเฉพาะในปัจจุบันของ iphoneX วิธีการปรับตัวที่เราสามารถนำมาใช้คือ:
(1) เมตาแท็ก
เพื่อที่จะปรับตัวเข้ากับไอโฟน
<meta name=viewport content=width=device-width,viewport-fit=cover>
(2) สอบถามสื่อ
1. ใช้ฟังก์ชันคงที่
ฟังก์ชันคงที่สามารถใช้ได้เฉพาะเมื่อตั้งค่า viewport-fit=cover เท่านั้น
@supports(bottom:constant(safe-area-inset-bottom)) { ตัวเลือก{ padding-bottom:constant(safe-area-inset-bottom); padding-bottom:calc(30px(ค่าสมมุติ) + ค่าคงที่(safe- area-inset-bottom)); //เลือกวิธีการปรับตัวตามสถานการณ์จริง}}2. ใช้พารามิเตอร์รุ่นเฉพาะของ iphoneX
@media เท่านั้น หน้าจอ และ (ความกว้างของอุปกรณ์: 375px) และ (ความสูงอุปกรณ์: 812px) และ (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px }}(3) การตัดสิน js (ใช้ Jquery ด้านล่าง)
if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px }}(4) โปรโตคอลไคลเอนต์
คุณยังสามารถขอให้ไคลเอนต์สอบถามว่าเป็น iphoneX หรือไม่ตามโปรโตคอลไคลเอนต์ เพื่อรักษาความสอดคล้องกับไคลเอนต์
4. คำอธิบายพารามิเตอร์
พารามิเตอร์ในโค้ดข้างต้นมีการอธิบายดังนี้:
พารามิเตอร์ข้างต้นคำนวณตามมาตรฐาน 1pt=1px หากหน้า H5 ใช้วิธีการปรับขนาด rem ดังนั้น 1pt = 1px * 3 (ความละเอียด iphoneX)
สรุปข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าเนื้อหาของบทความนี้จะมีคุณค่าอ้างอิงสำหรับการศึกษาหรือการทำงานของทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อการสื่อสารได้ เครือข่าย.