ใช้สื่อเพื่อตรวจสอบปัญหาที่พบในความกว้างของหน้าจอ:
บน iOS ฉันสามารถทำได้เมื่อฉันหมุนหน้าจอ แต่มันไม่ตอบสนองบน Android หน้าจอแนวนอนยังคงแสดงสไตล์หน้าจอแนวตั้งของฉัน
หลังจากตรวจสอบข้อมูลหากสื่อของ CSS3 ต้องการมีเอฟเฟกต์การแสดงผลที่ดีกว่าในด้านมือถือคุณต้องเพิ่มรหัสนี้ลงในส่วนหัวของหน้า
<meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1.0, ระดับสูงสุด = 1.0, ผู้ใช้-scalable = no">>
แต่ฉันไม่สามารถใช้รหัสนี้ได้ เพราะหน้าของฉันถูกดัดแปลง ขนาดตัวอักษรและขนาดสไตล์สามารถแสดงตามขนาดของหน้าจอ ถ้าฉันเพิ่มรหัสนี้การปรับตัวของฉันจะไม่ทำงาน ดังนั้นใช้วิธีการอื่น ๆ
สารละลาย:
อุปกรณ์มือถือจัดเตรียมกิจกรรม: กิจกรรม OrientationChange
เหตุการณ์นี้ถูกเพิ่มโดย Apple สำหรับ Safari เพื่อให้นักพัฒนาสามารถกำหนดเวลาที่ผู้ใช้สลับอุปกรณ์จากมุมมองแนวนอนเป็นโหมดมุมมองแนวตั้ง
เหตุการณ์นี้จะถูกทริกเกอร์เมื่ออุปกรณ์หมุน
// ฟังการปฐมนิเทศ ChangeWindow.addeVentListener ("OrientationChange", function () {// ประกาศหมายเลขการวางแนวใหม่ (window.orientation);}, false);ตราบใดที่ผู้ใช้เปลี่ยนโหมดการดูอุปกรณ์เหตุการณ์ OrientationChange จะถูกเรียกใช้ วัตถุเหตุการณ์ในเวลานี้ไม่มีข้อมูลที่มีค่าใด ๆ
เนื่องจากข้อมูลที่เกี่ยวข้องเท่านั้นที่สามารถเข้าถึงได้ผ่าน window.orientation
คุณลักษณะการปฐมนิเทศ
มีสามค่า: 0,90, -90
0 คือแนวตั้ง -90 หมายความว่าอุปกรณ์หมุนในแนวนอนไปยังโหมดภูมิทัศน์ทางด้านขวาในขณะที่ 90 หมายความว่าอุปกรณ์จะหมุนในแนวนอนไปยังโหมดภูมิทัศน์ทางด้านซ้าย
มีอีกอันหนึ่งนั่นคือ 180 ซึ่งหมายถึงหน้าจอแนวตั้ง แต่เป็นโหมดหน้าจอแนวตั้งที่พลิกกลับ แต่รุ่นนี้ยังไม่ได้รับการสนับสนุน
ดังแสดงในรูป:
ดังนั้นการรวมเหตุการณ์ OrientationChange นี้และคุณสมบัติการวางแนวของหน้าต่างมันง่ายกว่าสำหรับเราที่จะตรวจสอบว่าอุปกรณ์อยู่ในหน้าจอแนวนอนหรือแนวตั้ง
(function () {var init = function () {var updateOrientation = function () {var orientation = window.orientation; สวิตช์ (การวางแนว) {กรณี 90: case -90: การวางแนว = 'landscape'; // นี่คือการแบ่งแนวนอน ภูมิทัศน์และหน้าจอแนวตั้ง //plusportdocument.body.parentnode.setAttribute('Class', orientation);ron- // เหตุการณ์นี้เรียกว่าการหมุนแต่ละครั้ง UpdateOrientation ();}; window.addeventListener ('domcontentloaded', init, false);}) ();ดังนั้นจึงสามารถเพิ่มคลาสได้ตามสถานะการหมุนที่แตกต่างกันดังนั้น CSS ของเราจึงสามารถเขียนได้เช่นนี้
/** ร่างกายประสิทธิภาพแสดงสีแดง **/. ภาพบุคคล Div {พื้นหลัง: สีแดง;}/** ร่างกาย handwidth แสดงสีน้ำเงิน **/. ภูมิทัศน์ร่างกาย div {พื้นหลัง: สีน้ำเงิน;}อีกวิธีในการเขียนคือการใช้การสืบค้นสื่อ
@media ทั้งหมดและ (การวางแนว: ภาพบุคคล) {body div {พื้นหลัง: สีแดง;}} @media ทั้งหมดและ (การวางแนว: ภูมิทัศน์) {body div {พื้นหลัง: สีน้ำเงิน; -แบบสอบถามสื่อปฐมนิเทศนี้ใช้งานได้บน iOS3.2+ และ Android 2.0+
ค่อนข้างพูดรหัสประเภทนี้มีความรัดกุมมากกว่านี้เล็กน้อย ด้วย JS+CSS ข้างต้นรหัสประเภทนี้เป็น CSS บริสุทธิ์ เมื่ออุปกรณ์หมุน CSS ที่เปลี่ยนทิศทางจะถูกเรียกตามทิศทางของอุปกรณ์หมุน
ความเข้ากันได้
อุปกรณ์บางตัวไม่ได้จัดเตรียมเหตุการณ์ OrientationChange แต่อย่าเรียกเหตุการณ์การปรับขนาดของหน้าต่าง และหากการสืบค้นสื่อไม่สนับสนุนพวกเขาเราควรทำอย่างไร?
สามารถตัดสินได้โดยเหตุการณ์ Resize ใช้ InnerWidth และ InnerHeight เพื่อดึงขนาดหน้าจอ การตัดสินโดยการเปรียบเทียบความกว้างและความสูงความกว้างและความสูงเป็นหน้าจอแนวตั้งและความกว้างและความสูงเป็นหน้าจอแนวนอน
รหัสมีดังนี้:
(function () {var updateOrientation = function () {var orientation = (window.innerWidth> window.innerHeight)? window.addeventListener ('ปรับขนาด', updateorientation, false);}; window.addeventListener ('domcontentloaded', init, false);}) ();ด้วยวิธีนี้เราสามารถเห็นการเปลี่ยนแปลงสไตล์ที่เกิดจากการหมุนหน้าจอในเบราว์เซอร์
การรวมกันของวิธีการตรวจจับทั้งสองมีดังนี้:
(function () {var supportorientation = (typeof window.orientation === 'number' && typeof window.onorientationChange === 'Object'); var init = function () {var htmlnode = document.body.parentNode, การวางแนว; -90: การปฐมนิเทศ = 'landscape'; break; ค่าเริ่มต้น: การวางแนว = 'portrait'; break;}} else {Orientation = (window.innerWidth> window.innerHeight)? 'portrait';} htmlnode.setAttribute ('คลาส', การวางแนว);}; ถ้า (การสนับสนุน) {window.addeventListener ('OrientationChange', การอัพเดท, เท็จ); window.addeventListener ('resize', updateorientation, false);} updateOrientation ();}; window.addeventListener ('domcontentloaded', init, false);}) ();การใช้วิธีนี้คุณสามารถแก้ปัญหาการตรวจจับหน้าจอแนวนอนและแนวตั้งที่น่ารำคาญของอุปกรณ์มือถือ