วิธีบังคับหน้าจอแนวตั้งบนหน้ามือถือ

ล่าสุดฉันเขียนเพจบนมือถือในที่ทำงาน ในตอนแรกไม่มีอะไรเลย แต่มีข้อกำหนดที่ดูแปลกมากว่าฉันไม่เคยเจอมาก่อน แนวนอน Webview ที่เปิดหน้านี้ก็อยู่ในหน้าจอแนวนอนด้วย (APP เวอร์ชันล่าสุดเปิดใน webview หน้าจอแนวตั้ง) เดิมเราใช้เค้าโครง rem และไม่มีปัญหาในสถานะหน้าจอแนวนอน แต่ฝ่าย A หวังจะใช้หน้าจอแนวนอนในหน้าจอแนวนอน บังคับให้หน้านี้แสดงแนวตั้งเมื่อเปิดหน้าจอ จึงมีชุดการดำเนินการดังต่อไปนี้

ประการแรกคือการกำหนดสถานะของหน้าจอแนวนอนโดยใช้รหัสต่อไปนี้:

 function orient() { if(window.orientation == 90 || window.orientation == -90) {//หน้าจอแนวนอน//ipad, หน้าจอแนวตั้งของ iPhone//$(body).attr(class, แนวนอน); //orientation = 'landscape'; //alert(ipad, iphone แนวตั้งหน้าจอ; Andriod แนวนอน); $(p).text(หน้าจอแนวนอน); == 0 ||. window.orientation == 180) {//หน้าจอแนวตั้ง//ipad, หน้าจอแนวนอนของ iPhone; หน้าจอแนวตั้งของ Android// $(body).attr(คลาส, แนวตั้ง);// การวางแนว = 'แนวตั้ง'; //alert(ipad, iphone แนวนอนหน้าจอ; Andriod แนวตั้งหน้าจอ); $(p).text(vertical screen); } } //ถูกเรียกเมื่อเพจโหลด $(function() { orient(); }); //ถูกเรียกเมื่อผู้ใช้เปลี่ยนการวางแนวหน้าจอ $(window).on('orientationchange', function(e) { orient(); });

นี่คือการติดตามทิศทางของโทรศัพท์มือถือ อย่างไรก็ตาม เนื่องจากแอปเปิดในแนวนอน จึงมักเป็นไปไม่ได้ที่จะตรวจพบสิ่งนี้ และข้อกำหนดเบื้องต้นคือโทรศัพท์จะต้องเปิดการหมุนอัตโนมัติ ดังนั้นวิธีการข้างต้นจึงถูกยกเลิก

เนื่องจากวิธีการอันชาญฉลาดถูกยกเลิก วิธีที่ถูกที่สุดคือการตรวจสอบความกว้างและความสูงของหน้าจอ เมื่อความสูงมากกว่าความกว้าง เราจะตั้งค่าเริ่มต้นเป็นสถานะหน้าจอแนวตั้งของโทรศัพท์ เมื่อความกว้างมากกว่าความสูง เราจะถือว่าโทรศัพท์อยู่ในสถานะหน้าจอแนวนอน (แน่นอนว่าสิ่งนี้ก็มีข้อจำกัดเช่นกัน แต่เมื่อพิจารณาว่า APP ใหม่ได้แก้ปัญหาหน้าจอแนวนอนและแนวตั้งแล้ว เราก็จะทำตรงนี้เท่านั้น) เราไม่จำเป็นต้องทำอะไรเมื่อหน้าจออยู่ในโหมดแนวตั้ง แต่ในโหมดแนวนอนเราต้องหมุนหน้า 90 องศา เพื่อไม่ให้เป็นการเสียเวลา มาดูโค้ดกันโดยตรง:

 //ใช้การหมุน CSS3 เพื่อหมุนรูทคอนเทนเนอร์ 90 องศาทวนเข็มนาฬิกา เพื่อบังคับให้ผู้ใช้แสดงมันในแนวตั้ง var detectorOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document.getElementsByTagName(body)[0], $wrapper = document.getElementById(vue), style = ; ความสูง) { // หน้าจอแนวนอน // สไตล์ += ความกว้าง: + ความกว้าง + px;; // ให้ความสนใจกับการสลับความกว้างและความสูงหลังจากการหมุน // สไตล์ += ความสูง: + ความสูง + px;;// สไตล์ += -webkit- แปลง: หมุน (0); แปลง: หมุน (0);// สไตล์ += -webkit-transform-origin: 0 0;;// สไตล์ += เปลี่ยนต้นกำเนิด: 0 0;; ขนาดตัวอักษร : + (width * 100/1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = ขนาดตัวอักษร: + (กว้าง * 100/1125) + px; } else { // สไตล์แนวตั้ง + = ความกว้าง: + ความสูง + px;; สไตล์ += ความสูงขั้นต่ำ: + ความกว้าง + px;; สไตล์ += -webkit-transform: หมุน(-90deg); การแปลง: หมุน(-90deg); // ให้ความสนใจกับการจัดการรูปแบบจุดกึ่งกลางการหมุน += -webkit-transform-origin: + height / 2 + px + (height / 2) + px;; style += การแปลงต้นกำเนิด: + ความสูง / 2 + px + (ความสูง / 2) + px;; // style += ขนาดตัวอักษร: + ความสูง * 100 / 1125 + px;; //$(html).css({font-size:(height * 100 / 1125),overflow-y:hidden}); var html_doc = document.getElementsByTagName(html)[0]; style.cssText = ขนาดตัวอักษร: + ความสูง * 100/1125 + px; overflow-y:+hidden;+height:+height+px;; style += overflow-y: ซ่อนเร้น;; add_tab(); $wrapper.style.cssText = style; ;ฟังก์ชั่น add_tab(){ var clone_tab = $(ส่วนท้าย).clone(); $(ส่วนท้าย).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(body).append(clone_tab.css({position:fixed,right:1.77rem,bottom:4rem,left) :อัตโนมัติ,ด้านบน:0,ความกว้าง:11.25rem,ความสูง:1.77rem})}

ฉันเชื่อว่าโค้ดนี้ไม่ใช่เรื่องยากสำหรับบุคลากรส่วนหน้า แต่มีสามประเด็นที่ต้องสังเกต

จุดแรก:

ในตอนแรกฉันหมุน html ทั้งหมดโดยตรงเพื่อความสะดวก ในเวลานี้จะมีปัญหานั่นคือการวางตำแหน่งขององค์ประกอบที่มีตำแหน่งคงที่ในหน้าจะไม่ทำงาน (ส่วน <footer> ในโค้ดถูกวางไว้เป็น สลับแท็บด้านล่าง) เราจำเป็นต้องเปลี่ยนสิ่งนี้ เนื่องจากการหมุนองค์ประกอบหลักจะไม่ทำงานบนองค์ประกอบย่อย เราจึงไม่จำเป็นต้องหมุนองค์ประกอบหลัก เพียงแค่หมุนองค์ประกอบพี่น้องโดยตรง ที่นี่ฉันกำลังหมุนเวียนองค์ประกอบที่เรียกว่า #vue เนื่องจากเนื้อหาอื่นๆ ทั้งหมดบนเพจของฉันอยู่ใน div นี้ ฉันแค่หมุนองค์ประกอบ จากนั้นการวางตำแหน่งก็สามารถใช้ได้ในเวลานี้ แต่สไตล์ไม่ถูกต้อง ดังนั้นในฟังก์ชัน add_tab ของฉัน ฉันจึงปรับขนาดและรูปแบบขององค์ประกอบนี้เพื่อให้สามารถแสดงได้ตามปกติทางด้านขวาของหน้าจอ กล่าวคือ ในแนวตั้ง โหมดด้านล่างของหน้าจอ

จุดที่สอง:

สิ่งที่สองที่ควรทราบก็คือ เนื่องจากฉันใช้เลย์เอาต์ rem ฉันจะเปลี่ยนขนาดตัวอักษรของ html แต่ต้องระวังในเวลานี้ เมื่อเราหมุนมัน ความกว้างจะกลายเป็นความสูง และความสูงจะกลายเป็นความกว้าง ดังนั้นเราจึง จำเป็นต้องใช้ความสูงเพื่อคำนวณขนาดตัวอักษรของไดเร็กทอรีราก

จุดที่สาม:

จุดที่สามระบุไว้ในโปรแกรม เราต้องใส่ใจกับจุดศูนย์กลางการหมุนโดยค่าเริ่มต้นคือจุดศูนย์กลางขององค์ประกอบที่เลือก ตอนนี้เราต้องการเปลี่ยนจุดศูนย์กลางการหมุน หลังจากการหมุน คุณจะต้อง overflow-y:hidden html ด้วย มิฉะนั้นจะเกิดการเลื่อนโดยไม่จำเป็น

ในกรณีนี้ โดยพื้นฐานแล้วทั้งหน้าจะหมุน และองค์ประกอบที่มีตำแหน่งคงที่ด้านล่างจะถูกวางตำแหน่งอีกครั้งได้สำเร็จ โชคดีที่หน้าต่างป๊อปอัปที่เราใช้คือหน้าต่างป๊อปอัปของ Layui จากนั้นเราสามารถหมุนหน้าต่างป๊อปอัปได้ 90 องศา

PS: ในที่สุดฉันก็พบปัญหาที่ไม่สามารถแก้ไขได้ เมื่อหน้ายาวพอ นั่นคือเมื่อมีแถบเลื่อนหลังจากหน้าต่างป๊อปอัปปรากฏขึ้นหากคุณเลื่อนเลเยอร์มาสก์ไปด้านหลัง หน้าจะเลื่อนขึ้น ในตอนแรกปัญหานี้สามารถแก้ไขได้ด้วยการใช้ตำแหน่งคงที่ แต่เนื่องจากการหมุนเวียนนี้จึงล้มเหลว ดังนั้นจึงไม่มีวิธีที่ดี ไม่มีปัญหาในโหมดแนวตั้ง

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network