CSS 미디어 쿼리를 사용하여 장치 방향을 감지하는 방법은 무엇입니까?

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, Desk)에 영향을 미치지 않아야합니다. 그렇지 않으면 문제가 발생할 수 있습니다. 각 장치에 대해 하나의 기본 미디어 쿼리를 작성하여 뷰와 하나의 방향 미디어 쿼리를 모두 다루고 방향 뷰에 대해 더 구체적으로 코드를 작성하여 모범 사례를 작성하는 것이 좋습니다. 두 미디어 방향 쿼리를 동시에 작성할 필요는 없습니다. 아래 예제를 참조하십시오. 영어 작문이 그리 좋지 않다면 죄송합니다. 전의:

모바일

@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

---

Javascript에서는 screen.width및 을 사용하는 것이 좋습니다 screen.height. 이 두 값은 모든 최신 브라우저에서 사용할 수 있습니다. 앱이 실행될 때 브라우저가 축소 된 경우에도 화면의 실제 크기를 제공합니다. window.innerWidth브라우저가 축소되면 변경됩니다. 모바일 장치에서는 발생하지 않지만 PC 및 랩톱에서는 발생할 수 있습니다.

모바일 장치가 세로 모드와 가로 모드 사이를 전환 할 때 의 값 screen.width과 값이 screen.height변경되므로 값을 비교하여 모드를 결정할 수 있습니다. 경우 screen.width보다 큰 1280px을 당신은 PC 또는 노트북을 취급하고 있습니다.

You can construct an event listener in Javascript to detect when the two values are flipped. The portrait screen.width values to concentrate on are 320px (mainly iPhones), 360px (most other phones), 768px (small tablets) and 800px (regular tablets).

---

I would go for aspect-ratio, it offers way more possibilities.

/* 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) {
    ...
}

Both, orientation and aspect-ratio depend on the actual size of the viewport and have nothing todo with the device orientation itself.

Read more: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

참고URL : https://stackoverflow.com/questions/5735467/how-to-detect-the-device-orientation-using-css-media-queries