ส่วน CSS
ขั้นแรกให้สร้างคลาสใหม่สำหรับการตัดสินจากนั้นใช้การสืบค้นสื่อเพื่อกำหนดค่าที่แตกต่างให้กับแอตทริบิวต์ z-index ของคลาสนี้ คลาสนี้ใช้เป็นเพียงการอ่าน JavaScript ดังนั้นจึงจำเป็นต้องย้ายออกจากหน้าต่างหน้าจอเพื่อให้ผู้ชมมองไม่เห็นเพื่อหลีกเลี่ยงสถานการณ์ที่ไม่คาดคิด
เป็นการสาธิตรหัสต่อไปนี้จะตั้งค่าสถานะอุปกรณ์สี่สถานะ: เวอร์ชันเดสก์ท็อปปกติเวอร์ชันเดสก์ท็อปหน้าจอขนาดเล็กเวอร์ชันแท็บเล็ตและเวอร์ชันมือถือ
/ * สถานะเริ่มต้น */. state-indicator {ตำแหน่ง: สัมบูรณ์; ด้านบน: -999EM; ซ้าย: -999EM; z-index: 1;}/ * เดสก์ท็อปขนาดเล็ก */@Media All and (Max-Width: 1200px) {. State-Indicator {z-index: 2; }}/ * แท็บเล็ต */@Media All และ (Max-Width: 1024px) {.state-indicator {z-index: 3; }}/ * โทรศัพท์มือถือ */@Media All และ (Max-Width: 768px) {.state-indicator {z-index: 4; -การตัดสินของ JavaScript
CSS มีอยู่แล้วดังนั้นคุณต้องใช้ JavaScript เพื่อสร้างวัตถุ DOM ชั่วคราวจากนั้นตั้งค่าคลาสที่สอดคล้องกันสำหรับมันจากนั้นอ่านค่าดัชนี Z ของวัตถุนี้ วิธีการเขียนดั้งเดิมมีดังนี้:
// สร้างตัวบ่งชี้ indicator indicator = document.createElement ('div'); indicator.className = 'state-indicator'; document.body.appendchild (ตัวบ่งชี้); // สร้างวิธีที่ส่งคืนอุปกรณ์ getDevicestate () 10);} getDevicEstate () ฟังก์ชั่นส่งคืนค่าของ z-index เพื่อเพิ่มความสามารถในการอ่านคุณสามารถใช้ฟังก์ชั่นสวิตช์เพื่อสร้างมาตรฐานเอาต์พุต: ฟังก์ชั่น getDevicEstate () {switch (parseint (window.getComputedStyle (ตัวบ่งชี้) .getPropertyValue ('Z-index'), 10)) หยุดพัก; กรณีที่ 3: กลับ 'แท็บเล็ต'; หยุดพัก; กรณีที่ 4: ส่งคืน 'โทรศัพท์'; หยุดพัก; ค่าเริ่มต้น: ส่งคืน 'เดสก์ท็อป'; หยุดพัก; -ด้วยวิธีนี้คุณสามารถใช้รหัสต่อไปนี้เพื่อกำหนดสถานะอุปกรณ์จากนั้นเรียกใช้รหัส JavaScript ที่เกี่ยวข้อง:
if (getDevicEstate () == 'แท็บเล็ต') {// รหัส JavaScript ที่ดำเนินการภายใต้แท็บเล็ต}หากคุณใช้ jQuery ที่นี่เพียงใช้รหัสต่อไปนี้:
$ (function () {$ ('body') ผนวก ('<div> </div>'); ฟังก์ชั่น getDevicEstate () {switch (parseint ($ ('. state-indicator'). css ('z-index'), 10)) 'เดสก์ท็อป';สร้างอันดับแรกจากนั้นรับและลบโหนดนี้ในที่สุด อุปกรณ์เฉพาะจะถูกส่งออกในคอนโซลของคุณ คลิกที่นี่เพื่อดูการสาธิต คุณสามารถลองลากชายแดนกลางและคลิกเรียกใช้