เมื่อเร็วๆ นี้ ฉันกำลังเขียนหน้า h5 ที่ฝังอยู่ใน mini program webview ซึ่งเป็นฟังก์ชันของการแสดงความคิดเห็นในบทความ ในกระบวนการนี้ ฉันพบปัญหาความเข้ากันได้หลายประการ และประสิทธิภาพของรุ่นต่างๆ ก็ไม่สอดคล้องกันมากเช่นกัน ดังนั้นฉันจึงสรุปปัญหาต่อไปนี้ : บันทึกไว้เพื่อให้คุณสามารถทบทวนได้ในภายหลัง
1. ปัญหาวันที่สำหรับ yyyy-mm-dd hh:mm:ss ระบบ iOS ไม่รู้จักรูปแบบนี้
เมื่อเวลาถูกฟอร์แมตแล้ว จะถูกประมวลผลอย่างดีบนฝั่งเบราว์เซอร์ แต่เมื่อถึงมือถือ จะกลายเป็น NAN หรือ null ในกรณีนี้ ระบบ iOS จะไม่สามารถแปลงเวลาประเภทนี้ได้
ให้วันที่ = วันที่ใหม่ ('2019-02-28 18:33:24'); // null`วิธีแก้ไขคือแปลงเป็นรูปแบบ yyyy/mm/dd hh:mm:ss
แทนที่(//-/g, /)2. คีย์บอร์ดถูกวางและหน้ากระดาษค้างและไม่กลับมา
ใน iOS12 ฉันพบว่าเมื่อหดแป้นพิมพ์ หน้าจะค้าง โดยปล่อยให้ด้านล่างว่างไว้ หากขยับหน้าเล็กน้อย หน้าจะกลับคืนมา
สำหรับปัญหาประเภทนี้ ฉันได้ตรวจสอบวิธีแก้ไขปัญหามากมายบนอินเทอร์เน็ต วิธีแก้ไขคือการเลื่อนหน้าเว็บระหว่างที่เกิดเหตุการณ์เบลอ
window.scrollTo(0, เลื่อน);
แต่มีปัญหาร้ายแรงมาก: หากมีปุ่มบนเพจที่ต้องดำเนินการ เช่น กล่องใส่ความคิดเห็น + ปุ่มเผยแพร่ หลังจากป้อนข้อความแล้วให้คลิกเผยแพร่ และเมื่อเหตุการณ์การคลิกถูกทริกเกอร์ หน้าเพจ จะทำให้เกิดเหตุการณ์เบลอก่อน แล้วคีย์บอร์ดจะถอยกลับ - - - การคลิกปุ่มไม่ทำอะไรเลย
วิธีแก้ไข: การเปลี่ยนเหตุการณ์การคลิกเป็น ontouchstart สามารถแก้ปัญหานี้ได้ เหตุการณ์ ontouchstart ดีกว่าการคลิกเหตุการณ์
3. ใน webview ของแอปเพล็ต WeChat ใน iOS12 แป้นพิมพ์จะหดกลับและด้านล่างของหน้าจะว่างเปล่าสงสัยว่าปัญหานี้มีสาเหตุมาจากการตั้งค่าการเลื่อนหน้าอัตโนมัติ
4. การแก้ไข iPhone ล้มเหลว ส่งผลให้เคอร์เซอร์พื้นที่ข้อความเลื่อนบนเครื่องบางเครื่องวิธีแก้ไข: องค์ประกอบพี่น้องทั้งหมดกลายเป็นสัมบูรณ์ และองค์ประกอบหลัก overflow:auto;
องค์ประกอบหลัก: ความสูง: 100vh; ตำแหน่ง: ล้น: อัตโนมัติ; ช่องว่างภายใน: 10px; z-index: 15. แป้นพิมพ์ปิดกั้นช่องป้อนข้อมูล
หากกล่องอินพุตได้รับการแก้ไขที่ด้านล่างโดยใช้คงที่ เมื่อยกคีย์บอร์ดขึ้น การแก้ไขจะล้มเหลวบน iPhone ทำให้กล่องอินพุตจะเลื่อนไปตามหน้า และในบางรุ่น กล่องอินพุตจะเลื่อน บางครั้งถูกบล็อกโดยแป้นพิมพ์ ปัญหานี้เป็นครั้งคราวไม่เป็นมิตรมาก
วิธีแก้ไข: เลิกใช้รูปแบบคงที่ หากหน้ามีการเลื่อน ให้เลิกใช้แบบสัมบูรณ์ โปรดดูบทความก่อนหน้าเกี่ยวกับการชดเชยเคอร์เซอร์
ขอแนะนำให้ใช้เค้าโครงแบบยืดหยุ่น และความเข้ากันได้จะได้รับการแก้ไข
แน่นอนว่า หากคุณพบปัญหาข้างต้น แสดงว่าการออกแบบผลิตภัณฑ์นั้นไม่สมเหตุสมผลอย่างยิ่ง หากจำเป็น คุณยังคงต้องเปลี่ยนการออกแบบเป็นการออกแบบที่ไม่จำเป็นต้องผลักดันอินพุตด้วยแป้นพิมพ์ ไม่สมบูรณ์แบบ แก้ปัญหาได้ทุกรุ่น
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network