เมื่อเร็ว ๆ นี้ฉันทำงานในโปรเจ็กต์ webapp ซึ่งเป็นการพัฒนาแบบไฮบริดโดยมีหน้า H5 แบบเนทิฟภายนอกและภายในที่ซ้อนกัน ฟรอนต์เอนด์ได้รับการพัฒนาโดยใช้ vue และการปรับตัวทำได้โดยมีความยืดหยุ่น+rem เดิมทีทุกอย่างเรียบร้อยดี แต่ผู้นำบอกว่าลูกค้าบางคนแก่แล้วและไม่สามารถมองเห็นแบบอักษรได้ชัดเจน และพวกเขาหวังว่าแบบอักษรบนเว็บจะเป็นไปตามการเปลี่ยนแปลงขนาดแบบอักษรของระบบ ตอนนั้นฉัน...จริงๆ แต่ฉันไม่มีทางเลือกอื่นนอกจากต้องหาทางแก้ไขปัญหา หลังจากค้นหาในอินเทอร์เน็ต ฉันพบว่าห้ามทำตามการเปลี่ยนแปลงขนาดตัวอักษรของระบบภายใน ดูเหมือนว่า ฉันต้องทำมันเอง
ตัวเลือกแรกวิธีที่ง่ายที่สุดคือปล่อยให้ระบบดั้งเดิมทำงานโดยไม่มีการควบคุมภายใน ขยายสัญญาณภายนอก และปรับเปลี่ยนภายใน อย่างไรก็ตาม มีปัญหาเกิดขึ้น แบบอักษรของข้อความสามารถขยายได้ แต่ช่องป้อนข้อมูลบางช่องและเนื้อหาของช่องป้อนข้อมูลไม่ขยาย ดังนั้นวิธีแก้ปัญหานี้จึงถูกกำจัดไป
ตัวเลือกที่สองNative Webview ภายนอกช่วยให้สามารถซูมเข้าและออกด้านในได้โดยไม่เป็นไปตามการเปลี่ยนแปลงของระบบ และถูกควบคุมภายในด้วยตัวมันเอง หลังจากพูดคุยกับเพื่อนร่วมงาน Android ของเขา เขาได้รับพารามิเตอร์การซูมของระบบ จากนั้นส่งพารามิเตอร์ไปยังเว็บแอปภายใน และปรับแต่งการซูมภายใน
รหัสมีดังนี้:
setScaleFont(){ la fontScale=1; la sizeFontSize; la docHtml=document.getElementsByTagName( html.) )[0]; initFontSize=this.getStyle(docHtml,'fontSize').split('px')[0]; scaleFontSize=fontScale*initFontSize;//1-1.4 มาตราส่วนตามสัดส่วน docHtml.style.fontSize=scaleFontSize +'px' } , getStyle(obj, name){ if(window.currentStyle){ return obj.currentStyle[ชื่อ]; } else{ return getComputedStyle(obj, false)[ชื่อ];ขั้นแรกให้รับอัตราส่วนมาตราส่วนเริ่มต้น จากนั้นเขียนขนาดแบบอักษรบนแท็ก html ใหม่ตามอัตราส่วนมาตราส่วนดั้งเดิมที่ส่งผ่านโดย Android เนื่องจากการใช้การปรับ rem มันจะถูกปรับตามขนาดขององค์ประกอบรูท โซลูชันนี้ต้องแน่ใจว่ามีการดำเนินการปรับใช้แบบยืดหยุ่นก่อน จากนั้นจึงพิจารณาว่าเป็น Android หรือไม่ ให้ดำเนินการวิธี setScaleFont เพื่อให้มีประสิทธิภาพ ขยายแล้วลดหรือลดขนาดลงก่อน
ดังที่แสดงในภาพด้านบน ฉันใส่ความคิดเห็นในโค้ดนี้ ไม่เช่นนั้นปรากฏการณ์การซูมเข้าและซูมออกที่กล่าวมาข้างต้นจะเกิดขึ้น
สรุปแล้ววิธีนี้ใช้ได้กับ Android เท่านั้น Apple ไม่สามารถรับอัตราส่วนขนาดของแบบอักษรของระบบได้เนื่องจากปัญหาการอนุญาตด้านความปลอดภัย ดังนั้นจึงไม่สามารถปรับเปลี่ยนได้ หากใครทราบวิธีใช้งานบน Apple หรือมีวิธีการอื่นที่ดีกว่านี้ โปรดแจ้งให้เราทราบ ขอบคุณ.
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network