ไม่นานมานี้ฉันทำโครงการ H5 และจำเป็นต้องทำการประมวลผลบางอย่างเมื่อหน้าจอแนวนอนและแนวตั้งเปลี่ยนไป ไม่ต้องสงสัยเลยว่าจะต้องใช้ OrientationChange เพื่อตรวจสอบการเปลี่ยนแปลงในหน้าจอแนวนอนและแนวตั้ง
แผน 1:
// ฟังการปฐมนิเทศการเปลี่ยนแปลง window.addeventListener ("OrientationChange", ฟังก์ชั่น (เหตุการณ์) {// การตัดสินหน้าจอแนวนอนและแนวตั้งตามเหตุการณ์ที่เกิดขึ้นหลังจากเพิ่มรหัสแล้วมีปัญหาความเข้ากันได้หลายประการ ปัญหาความเข้ากันได้เกิดขึ้นที่นี่ในสองแห่ง:
OrientationChange
Event.orientation | Screen.orientation.angle
ต่อไปนี้เป็นความเข้ากันได้ของเหตุการณ์ OrientationChange:
ต่อไปนี้คือความเข้ากันได้ของหน้าจอการปรับทิศทาง:
แผน 2:แผนข้างต้นใช้งานไม่ได้ดังนั้นคุณสามารถทำวิธีอื่นได้เท่านั้น Google และเรียนรู้ว่าสามารถทำได้ผ่านการปรับขนาด (window.inner/outerwidth, window.inner/outerheight):
window.addeventListener ("ปรับขนาด", ฟังก์ชั่น (เหตุการณ์) {var orientation = (window.innerWidth> window.innerHeight)? "Landscape": "Portrait"; ถ้า (oritentation ===โซลูชันนี้ตอบสนองความต้องการของโครงการส่วนใหญ่ แต่ยังมีข้อบกพร่องบางอย่าง:
ตราบใดที่ขนาดของหน้าต่างเปลี่ยนไปเหตุการณ์การปรับขนาดจะถูกเรียกอย่างต่อเนื่อง คุณสามารถใช้ Settimeout เพื่อปรับให้เหมาะสม
หากมีหลายสถานที่ที่ต้องตรวจสอบหน้าจอแนวนอนและแนวตั้งคุณต้องลงทะเบียนหลาย windows.addeventListener ("ปรับขนาด" ฟังก์ชั่น (เหตุการณ์) {... }) คุณสามารถปรับปรุงผ่านโหมดการสมัครสมาชิกและการเผยแพร่ได้หรือไม่? ลงทะเบียนปรับขนาดเพื่อตรวจสอบการเปลี่ยนแปลงในหน้าจอแนวนอนและแนวตั้งเท่านั้นและเผยแพร่การแจ้งเตือนไปยังวัตถุที่สมัครเป็นสมาชิกตราบใดที่การเปลี่ยนแปลงแนวนอนและแนวตั้งเกิดขึ้น สถานที่อื่น ๆ ที่ต้องตรวจสอบหน้าจอแนวนอนและแนวตั้งเป็นเพียงการสมัครสมาชิก
รหัสคีย์มีดังนี้:
var resizecb = function () {ถ้า (win.innerWidth> win.innerHeight) {// เริ่มต้นการตัดสิน meta.init = 'ภูมิทัศน์'; meta.current = 'ภูมิทัศน์'; } else {meta.init = 'portrait'; meta.current = 'portrait'; } return function () {ถ้า (win.innerWidth> win.innerHeight) {ถ้า (meta.current! == 'Landscape') {meta.current = 'Landscape'; Event.trigger ('__ Orientationchange__', meta); }} else {ถ้า (meta.current! == 'portrait') {meta.current = 'portrait'; Event.trigger ('__ Orientationchange__', meta); -คลิกรหัสเต็มที่นี่
แผน 3:
อย่างไรก็ตามโดยส่วนตัวแล้วฉันคิดว่าการใช้งาน Window.innerWidth> Window.innerHeight เป็นการตรวจจับแบบหลอกซึ่งไม่น่าเชื่อถือเล็กน้อย การตรวจจับสามารถทำได้ผ่านเบราว์เซอร์หรือไม่? สิ่งนี้ขึ้นอยู่กับการสืบค้นสื่อ CSS3@Media
ดังต่อไปนี้ @media ความเข้ากันได้:
ดังที่แสดงในรูปด้านบนเบราว์เซอร์มือถือรองรับสื่อ CSS3
แนวคิดการใช้งาน:
สร้างสไตล์ CSS เฉพาะที่ระบุสถานะหน้าจอแนวนอนและแนวตั้ง
ฉีดรหัส CSS ลงในหน้าผ่าน JS
ฟังก์ชั่นการโทรกลับแบบปรับขนาดได้รับสถานะของหน้าจอแนวนอนและแนวตั้ง
ที่นี่ฉันเลือกแบบอักษรฟอนต์โหนดของ <html> </html> เป็นแอตทริบิวต์สไตล์การตรวจจับ เหตุผล มีดังนี้:
เลือก <html> </html> ส่วนใหญ่เพื่อหลีกเลี่ยงการรีมอนและทาสีใหม่
สไตล์ฟอนต์-ครอบครัวส่วนใหญ่เป็นเพราะฟอนต์-ครอบครัวมีลักษณะดังต่อไปนี้:
ด้วยวิธีนี้เราสามารถระบุโลโก้ที่เฉพาะเจาะจงเพื่อระบุสถานะของหน้าจอแนวนอนและแนวตั้ง แต่โลโก้ที่ระบุจะต้องวางไว้ด้านหน้าของแบบอักษรอื่น ๆ เพื่อไม่ให้เกิดการเปลี่ยนแปลงแบบอักษร HMTL
รหัสคีย์มีดังนี้:
// callback var resizecb = function () {var hstyle = win.getComputedStyle (html, null), ffstr = hstyle ['font-family'], pstr = "portrait," + ffstr, lstr = "ภูมิทัศน์" .Orientation {font-family: ' + pstr +';}} @media (การวางแนว: landscape) {.orientation {font-family: ' + lstr +';}} '; // load style loadstylestring (CSSSTR); // เพิ่มคลาส html.classname = 'การวางแนว' + html.classname; if (hstyle ['font-family'] === pstr) {// เริ่มต้นการตัดสิน meta.init = 'portrait'; meta.current = 'portrait'; } else {meta.init = 'ภูมิทัศน์'; meta.current = 'ภูมิทัศน์'; } return function () {ถ้า (hstyle ['font-family'] === pstr) {ถ้า (meta.current! == 'portrait') {meta.current = 'portrait'; Event.trigger ('__ Orientationchange__', meta); }} else {ถ้า (meta.current! == 'Landscape') {meta.current = 'Landscape'; Event.trigger ('__ Orientationchange__', meta); -คลิกรหัสเต็มที่นี่
ผลการทดสอบ
เอฟเฟกต์ภาพบุคคล:
เอฟเฟกต์ภูมิทัศน์:
แผน 4:
คุณสามารถปรับปรุงได้ เมื่อสนับสนุน OrientationChange ให้ใช้ OrientationChange ดั้งเดิม ถ้าไม่ใช้โซลูชัน 3.
รหัสคีย์มีดังนี้:
// ไม่ว่าจะเป็นเหตุการณ์ OrientationChange ที่ได้รับการสนับสนุน isorientation = ('การวางแนว' ในหน้าต่าง && 'onorientationchange' ในหน้าต่าง); // callbackvar OrientationCb = ฟังก์ชั่น (e) {ถ้า (win.orientation === 180 || win.orientation === 0) {meta.init = 'portrait meta.current = 'portrait'; } if (win.orientation === 90 || win.orientation === -90) {meta.init = 'ภูมิทัศน์'; meta.current = 'ภูมิทัศน์'; } return function () {ถ้า (win.orientation === 180 || win.orientation === 0) {meta.current = 'portrait'; } if (win.orientation === 90 || win.orientation === -90) {meta.current = 'ภูมิทัศน์'; } event.trigger (EventType, Meta); }}; var callback = isOrientation? OrientationCb (): (function () {resizecb (); return function () {timer && win.cleartimeout (ตัวจับเวลา); timer = win.settimeout (resizecb, 300);}}) (); // ฟัง win.addeventlistener (isorientationคลิกรหัสเต็มที่นี่
แผน 5:
ในปัจจุบันโซลูชันข้างต้นทั้งหมดจะถูกนำไปใช้ผ่านการสมัครสมาชิกที่กำหนดเองและเผยแพร่โหมดเหตุการณ์ ที่นี่ OrientationChange สามารถจำลองได้ตามกลไกเหตุการณ์ของเบราว์เซอร์ นั่นคือแก้ไขความไม่ลงรอยกันของ OrientationChange
รหัสคีย์มีดังนี้:
var eventType = 'OrientationChange'; // Trigger Native OrientationChangeVar Fire = function () {var e; if (document.createeeVent) {e = document.createeeVent ('htmlevents'); E.InitEvent (EventType, True, False); win.dispatchevent (e); } else {e = document.createveEventObject (); E.EventType = EventType; if (win [eventtype]) {win [eventtype] (); } อื่นถ้า (win ['on' + eventType]) {win ['on' + eventtype] (); } else {win.fireevent (EventType, e); -คลิกรหัสเต็มที่นี่
ผ่านการแก้ปัญหาห้าประการข้างต้นฉันมีความเข้าใจเพิ่มเติมเกี่ยวกับการตรวจจับหน้าจอแนวนอนและแนวตั้งบนขั้วมือถือ ฉันรู้แค่ว่าทำไมฉันถึงเขียนเกี่ยวกับบางสิ่งด้วยตัวเองหลังจากที่ฉันได้สัมผัสพวกเขาเอง ฉันยังบันทึกเหตุผลในบทความโดยหวังว่าพวกเขาจะเป็นประโยชน์กับทุกคน หลังจากโซลูชันห้าวิธีพัฒนาไปสู่การ OrientationChange-Fix สุดท้ายที่อยู่ GitHub: https://github.com/zhansingsong/orientationchange-fix
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น