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

나는 가로 세로 비율로 가고, 그것은 더 많은 가능성을 제공합니다.

/* 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브라우저가 축소되면 변경됩니다. 모바일 기기에서는 불가능하지만 PC와 랩톱에서는 발생할 수 있습니다.

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

Javascript로 이벤트 리스너를 구성하여 두 값이 반전되는시기를 감지 할 수 있습니다. 집중해야 할 세로 화면 너비 값은 320px (주로 iPhone), 360px (대부분의 다른 전화), 768px (작은 태블릿) 및 800px (일반 태블릿)입니다.