วิธีการตัดสิน
อุปกรณ์มือถือมีวัตถุสองชิ้นแอตทริบิวต์หนึ่งและหนึ่งเหตุการณ์:
(1) Window.Orientation เป็นแอตทริบิวต์ก่อนหน้าของวัตถุหน้าต่าง มีสามค่า: 0 คือภาพบุคคล 90 กลับไปทางซ้ายและหันไปใช้โหมดภูมิทัศน์ -90 กลับด้านไปทางขวาและหันไปใช้โหมดภูมิทัศน์และ 180 สุดท้ายคืออุปกรณ์กลับด้านด้านล่างหรือแนวตั้ง
(2) OrientationChange เป็นเหตุการณ์ที่จะกระตุ้นเหตุการณ์นี้เมื่ออุปกรณ์หมุนเช่นเดียวกับเหตุการณ์การปรับขนาดที่ใช้บนพีซี
เมื่อใช้สองนี้ร่วมกันมันเป็นเรื่องง่ายที่จะได้รับสถานะหน้าจอแนวนอนและแนวตั้งของอุปกรณ์ รหัสมีดังนี้:
(function () {var init = function () {var updateOrientation = function () {var orientation = window.orientation; สวิตช์ (การวางแนว) {กรณี 90: case -90: การวางแนว = 'landscape'; break; default: Orientation = 'portrait'; document.body.parentnode.setAttribute ('class', การวางแนว);ใน CSS คุณสามารถเขียนด้วยวิธีนี้:
/** ประสิทธิภาพการทำงานของ Div แสดงให้เห็นว่าสีน้ำเงิน **/. ภาพบุคคล Div Div {ชายแดน: 1px Solid Blue;}/** ประสิทธิภาพการทำงานของ Div แสดงให้เห็นสีเหลือง **/. ภูมิทัศน์ร่างกาย Div {ชายแดน: 1px Solid Yellow;}แน่นอนคุณสามารถใช้การสืบค้นสื่อ (แนะนำ):
@media ทั้งหมดและ (การวางแนว: ภาพบุคคล) {body div {ชายแดน: 1px solid blue; }}@Media All and (การวางแนว: Landscape) {Body Div {Border: 1px Solid Yellow; -ความเข้ากันได้
วิธีจัดการกับสถานการณ์ที่หน้าต่างการปรับทิศทางหรือ OrientationChange ไม่มีอยู่ในอุปกรณ์? (โดยทั่วไปไม่มีอยู่อีกอันหนึ่งไม่มีอยู่มิฉะนั้น)
ในการพัฒนาต้นโหมดโมเดลอุปกรณ์ของ Chrome มักจะใช้ แต่คุณสมบัตินี้ไม่มีอยู่ดังนั้นฉันจะได้รับค่านี้ได้อย่างไร วิธีง่ายๆคือการตัดสินตามการเปรียบเทียบความกว้างและความสูง หากความกว้างมีขนาดเล็กกว่าความสูงมันเป็นหน้าจอแนวตั้งและความกว้างและความสูงเป็นหน้าจอแนวนอน
ฉันรู้วิธีรับผลลัพธ์ สิ่งต่อไปคือวิธีฟังเหตุการณ์การพลิกกลับของอุปกรณ์ เนื่องจาก OrientationChange ไม่สามารถใช้งานได้ให้ใช้เหตุการณ์การปรับขนาดพื้นฐานที่สุดหรือใช้ตัวจับเวลาเพื่อตรวจจับ โปรดดูที่รหัส:
(function () {var updateOrientation = function () {var orientation = (window.innerWidth> window.innerHeight)? // ฟังหน้าต่างเหตุการณ์ Resize AddeVentListener ('Resize', UpdateOrientation, False);ในที่สุดการรวมสองวิธีข้างต้นเป็นวิธีการตรวจจับที่สมบูรณ์
(function () {var supportorientation = (typeof window.orientation === 'number' && typeof window.onorientationChange === 'Object'); var init = function () {var htmlnode = document.body.parentNode, การวางแนว; -90: การวางแนว = 'landscape'; Window.addeventListener ('Orientationchange', upderientation, false);สรุป
ใช้เหตุการณ์ OrientationChange เพื่อตรวจสอบว่าอุปกรณ์หมุนและใช้ Window.Orientation Property เพื่อตรวจสอบว่าเป็นหน้าจอแนวนอนหรือแนวตั้งในปัจจุบันเพื่อดำเนินการที่แตกต่างกัน