ฉันพบปัญหาแปลกๆ ในที่ทำงาน หลังจากดิ้นรนมาเป็นเวลานาน ในที่สุดฉันก็แก้ไขมันได้ ที่นี่ ฉันบันทึกแนวคิดและวิธีแก้ปัญหาไว้
โปรเจ็กต์นี้คือการสร้างเว็บไซต์อย่างเป็นทางการของบริษัทที่ตอบสนองได้ หลังจากที่หน้าภาพนิ่งถูกตัดออกในระยะแรก มันก็ถูกส่งไปยังแบ็กเอนด์เพื่อใช้เป็นเทมเพลต และโดยพื้นฐานแล้วฉันก็ออกจากโปรเจ็กต์
เมื่อใช้งานแบ็กเอนด์ ฉันพบว่าการแสดงหน้าเว็บบนเทอร์มินัลบนมือถือนั้นไม่ถูกต้องนักและดูไม่ชัดเจนมาก ความคิดแรกคือส่วนหัวของเมตาถูกปกคลุม หลังจากตรวจสอบซอร์สโค้ดแล้ว ฉันพบว่ามันถูกปกคลุม
นี่คือส่วนหัวเมตาที่ฉันคุ้นเคยเพื่อให้ความกว้างของหน้าปรับเปลี่ยนตามความกว้างของอุปกรณ์
<meta name=viewport content=width=device-width, default-scale=1, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no />
อย่างไรก็ตาม เฟรมเวิร์กการใช้งานแบ็คเอนด์ได้รับการแนะนำโดยตรงตามเทมเพลต และทรัพยากรสาธารณะบางส่วนยังรวมเมตาสำหรับการตั้งค่าวิวพอร์ตด้วย มีการแนะนำแบ็กเอนด์ดังนี้:
<meta name=viewport id=viewport content=width=640px, user-scalable=no>
ส่วนหัวนี้ต่อท้ายด้วยไฟล์ js ที่ต้องเพิ่ม และมีแจ้งชัดเจนว่าไฟล์ js ไม่สามารถแก้ไขได้! ดังนั้นการตั้งค่าความกว้างคงที่ 640px นี้จึงเขียนทับการตั้งค่าเมตาดั้งเดิมของฉันที่เปลี่ยนแปลงตามความกว้างของอุปกรณ์!
ปัญหาเกิดขึ้น หน้าคงที่เสร็จสมบูรณ์แล้ว และเนื่องจากปัจจัยของโค้ดในอดีต โค้ดส่วนใหญ่จึงไม่ได้ใช้หน่วย rem ในตอนเริ่มต้น และไม่สามารถแก้ไขเอฟเฟกต์ css ในขนาดใหญ่ได้อีกต่อไป โดยการรีเซ็ตความกว้างวิวพอร์ตผ่าน js เท่านั้นจึงจะสามารถแทนที่ได้อีกครั้ง... มันค่อนข้างง่าย แต่โค้ดค่อนข้างน่าเกลียด
แต่มีปัญหาอื่นเกิดขึ้น หน้าเว็บไซต์อย่างเป็นทางการนี้ยังแนะนำหน้า iframe เหล่านี้ด้วยความกว้างคงที่ 640px นี่มันทำลายล้างมาก! หากฉันเพิ่มเมตาที่เปลี่ยนแปลงตามความกว้างของอุปกรณ์ iframe เหล่านี้จะไม่สามารถดูได้ หากฉันไม่เพิ่มเมตาอีกครั้ง ก็จะไม่สามารถดูเว็บไซต์อย่างเป็นทางการได้!
โชคดีที่ iframe เหล่านี้ถูกนำมาใช้ผ่านวิธีการแบบครบวงจร แม้ว่าไฟล์ js ของวิธีการแนะนำจะไม่สามารถเปลี่ยนแปลงได้ แต่ก็ยังสามารถตรวจสอบได้อีกครั้งในรหัสธุรกิจ ดังนั้นหลังจากเชื่อมโยงเหตุการณ์การคลิกอีกครั้งและพิจารณาว่า iframe ได้รับการแนะนำหรือไม่ ก็ถึงเวลาที่จะใช้วิธีพิเศษบางอย่าง!
CSS3 มีวิธี transform: scale() ที่สามารถปรับขนาดองค์ประกอบได้ แม้ว่าความกว้างและความสูงที่แท้จริงของพื้นที่ว่างจะไม่เปลี่ยนแปลง แต่เอฟเฟกต์การแสดงผลยังคงดีอยู่
สามารถรับอัตราส่วนสเกลที่สอดคล้องกันได้โดยการคำนวณ 缩放比例= 设备宽度/ 640 จากนั้นตั้งค่า transform: scale(缩放比例) บน iframe ที่แนะนำเพื่อให้ได้สเกลที่สวยงาม!
เรื่องนี้จบแล้วเหรอ? เลขที่! ยัง! iframe ได้รับการปรับขนาด แต่ความสูงก็ถูกปรับขนาดด้วย และเนื้อหาก็แสดงไม่สมบูรณ์ การตั้งค่า height: 设备高度/ 缩放比例สามารถคืนค่าความสูง iframe ดั้งเดิมได้
คิดว่าจบแล้วเหรอ? ไม่เชิง! ยังมีปัญหา! หลังจากที่เลเยอร์ iframe ได้รับการปรับขนาดตามแอตทริบิวต์ scale() แล้ว ก็จะเลื่อนระยะทางหนึ่งลงด้านล่างและไปทางขวาตามค่าเริ่มต้น เนื่องจาก scale() จะปรับขนาดตามศูนย์กลางตามค่าเริ่มต้น ฉันใช้เวลามากมายที่นี่เพื่อค้นหาวิธีแก้ไขที่เหมาะสม เช่น อัตรากำไรติดลบ การแปล () ฯลฯ อย่างไรก็ตาม เนื่องจากความยากลำบากในการคำนวณค่าสัมประสิทธิ์สัดส่วนการเคลื่อนที่ที่เหมาะสม ฉันขอโทษสำหรับอัลกอริทึมที่ไม่ดีของฉัน ฉันจึงลองใช้วิธีนี้ อยู่นานและในที่สุดก็ตัดสินใจยอมแพ้.... ..
เมื่อดูคู่มือ CSS ฉันพบแอตทริบิวต์ที่คุ้นเคยแต่ไม่คุ้นเคย
กำหนดตำแหน่งจุดฐานขององค์ประกอบที่หมุน:
ต้นกำเนิดการแปลง: แกน x แกน y แกน z;
มีค่าแอตทริบิวต์สามค่า ซึ่งแสดงถึงตำแหน่งที่มุมมองที่กำหนดไว้บนแกน X, Y และ Z ตามลำดับ
เจอเพื่อนเก่าต่างแดน เจอเพื่อนเก่า หลังแล้งมานาน! สิ่งที่ฉันต้องการคือคุณ! ตั้ง transform-origin: 0 top 0 โซลูชัน~
จริงๆ แล้ว คุณลักษณะนี้ถูกใช้มานานแล้ว แต่สิ่งที่ฉันเขียนครั้งแรกคือตัวย่อของ transform-origin: 0 และหลังจากแยกวิเคราะห์โดยเบราว์เซอร์แล้ว มันก็กลายเป็น transform-origin: 0 center 0 ... ฉันรู้สึกอย่างไรที่ แค่นั้นแหละ. ฉันคิดที่จะย้าย iframe ขึ้นไป แต่ฉันไม่รู้ว่าคนอื่นมีฟังก์ชั่นเช่นนี้ แต่ฉันเพิกเฉย ฉันยังไม่สามารถเรียนแบบเร่งรีบได้ ฉันเสียเวลาไปครึ่งวันกับคุณลักษณะเดียว ฉันอาจไม่ใช่ส่วนหน้าที่มีคุณสมบัติเหมาะสม... (escape
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network