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.

}

데스크톱

설계 요구사항에 따라 ...(:

고마워, 지투

저는 종횡비를 선택하고 싶습니다. 그것은 훨씬 더 많은 가능성을 제공합니다.

/* 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

오리엔테이션이 안정적으로 작동하지 않는 것 같습니다.
가로 세로 비율로 운동하는 것이 더 좋은 방법일 수 있습니다.

@media only screen and (max-aspect-ratio: 1/1){
//portrait
}
@media only screen and (min-aspect-ratio: 1/1){
//horizontal
}

자바스크립트에서는 사용하는 것이 더 좋습니다.screen.width그리고.screen.height이 두 값은 모든 최신 브라우저에서 사용할 수 있습니다.그들은 앱이 실행될 때 브라우저가 축소되더라도 화면의 실제 크기를 제공합니다.window.innerWidth브라우저가 축소될 때 변경되는 사항으로, 모바일 장치에서는 발생할 수 없지만 PC 및 랩톱에서는 발생할 수 있습니다.

의 값screen.width그리고.screen.height모바일 장치가 세로 모드와 가로 모드 사이에서 플립되는 시간을 변경하여 값을 비교하여 모드를 결정할 수 있습니다.screen.widthPC 또는 노트북을 취급하는 1280px보다 큽니다.

Javascript로 이벤트 수신기를 구성하여 두 값이 뒤집힐 때 탐지할 수 있습니다.세로 화면.집중할 폭 값은 320px(주로 iPhone), 360px(대부분의 다른 전화기), 768px(작은 태블릿) 및 800px(일반 태블릿)입니다.

간단히 아래 코드를 사용하여 테스트할 수 있습니다.

@media all and (orientation:portrait) {
 // simple css for portrait mode of mobile device
}

@media all and (orientation:landscape) {
 // css for landscape mode
}

추가 정보: https://www.w3.org/TR/mediaqueries-3/ # 오리엔테이션

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