วิธีการตรวจจับการวางแนวอุปกรณ์โดยใช้คิวรี่สื่อ CSS?

ใน JavaScript โหมดการวางแนวสามารถตรวจจับได้โดยใช้:

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

อย่างไรก็ตามมีวิธีตรวจจับทิศทางโดยใช้ CSS เท่านั้นหรือไม่

เช่น. สิ่งที่ต้องการ:

@media only screen and (width > height) { ... }

CSS เพื่อตรวจจับการวางแนวหน้าจอ:

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

นิยาม CSS ของเคียวรีสื่อบันทึกอยู่ที่http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

แต่ดูเหมือนว่าคุณต้องทำการทดสอบ

ฉันคิดว่าเราต้องเขียนข้อความค้นหาสื่อเฉพาะเจาะจงมากขึ้น ตรวจสอบให้แน่ใจว่าคุณเขียนข้อความค้นหาสื่อหนึ่งรายการควรไม่ส่งผลกระทบต่อมุมมองอื่น (Mob, Tab, โต๊ะทำงาน) มิฉะนั้นอาจเป็นปัญหาได้ ฉันอยากจะแนะนำให้เขียนข้อความค้นหาสื่อพื้นฐานหนึ่งข้อความสำหรับอุปกรณ์ที่เกี่ยวข้องซึ่งครอบคลุมทั้งข้อความค้นหาและสื่อบันทึกการปฐมนิเทศหนึ่งรายการที่คุณสามารถระบุรหัสเพิ่มเติมเกี่ยวกับมุมมองการปฐมนิเทศเพื่อการปฏิบัติที่ดี เราไม่จำเป็นต้องเขียนข้อความค้นหาการวางแนวสื่อทั้งสองในเวลาเดียวกัน คุณสามารถดูตัวอย่างด้านล่างของฉัน ฉันขอโทษถ้าการเขียนภาษาอังกฤษของฉันไม่ค่อยดีนัก Ex:

สำหรับมือถือ

@media screen and (max-width:767px) {

..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.

}


@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {


..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

สำหรับแท็บเล็ต

@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query  CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){

..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.

}

เดสก์ทอป

ทำให้ตามความต้องการของคุณสนุกกับการออกแบบ ... (:

ขอบคุณ Jitu

ฉันต้องการอัตราส่วนภาพมันมีความเป็นไปได้มากขึ้น

/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
    ...
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
    ...
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
    ...
}

ทั้งการวางแนวและอัตราส่วนกว้างยาวขึ้นอยู่กับขนาดที่แท้จริงของวิวพอร์ตและไม่มีอะไรที่ต้องทำกับการวางแนวอุปกรณ์

อ่านเพิ่มเติม: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

ใน Javascript มันจะดีกว่าที่จะใช้และscreen.width screen.heightค่าทั้งสองนี้มีอยู่ในเบราว์เซอร์สมัยใหม่ทั้งหมด มันให้มิติที่แท้จริงของหน้าจอแม้ว่าเบราว์เซอร์จะถูกลดขนาดลงเมื่อแอพเริ่มทำงาน window.innerWidthการเปลี่ยนแปลงเมื่อเบราว์เซอร์ลดขนาดลงซึ่งไม่สามารถเกิดขึ้นได้บนอุปกรณ์มือถือ แต่สามารถเกิดขึ้นได้บนพีซีและแล็ปท็อป

ค่าของscreen.widthและscreen.heightเปลี่ยนเมื่ออุปกรณ์มือถือพลิกระหว่างโหมดแนวตั้งและแนวนอนดังนั้นจึงเป็นไปได้ที่จะกำหนดโหมดโดยการเปรียบเทียบค่า ถ้าscreen.widthมากกว่า 1280px คุณกำลังติดต่อกับพีซีหรือแล็ปท็อป

คุณสามารถสร้างฟังเหตุการณ์ใน Javascript เพื่อตรวจสอบเมื่อทั้งสองค่าพลิก ค่าแบนด์วิดท์หน้าจอแนวตั้งที่จะเน้นคือ 320px (ส่วนใหญ่เป็น iPhones), 360px (โทรศัพท์ส่วนใหญ่อื่น ๆ ), 768px (แท็บเล็ตขนาดเล็ก) และ 800px (แท็บเล็ตทั่วไป)