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

Question

CSS @media 쿼리를 사용하여 기기의 방향을 감지하는 가장 신뢰할 수있는 방법은 무엇입니까?

나는이 시도 :

@media screen and (orientation: portrait) 
@media screen and (orientation: landscape) 

을하지만 그들은 모든 경우에 작동하지 않습니다. On some Android devices, 세로 모드에서 키보드를 표시하면 가로/세로 비율이 1/1 이상이므로 "orientation : landscape"쿼리를 사용할 수 있습니다.

내가 대신 이것을 사용하는 suggestions을 본 적이 :

@media screen and (max-aspect-ratio: 13/9) // portrait 
@media screen and (min-aspect-ratio: 13/9) // landscape 

을하지만이 아이 패드에 폰갭에서 작동하지 않습니다; 당신은 12/9와 비슷한 것을 더 필요로합니다. 그리고 가로 세로 모드가 해당 비율보다 작은 기기가있을 수 있으므로 이러한 특정 비율을 타겟팅하는 데 조금 걱정됩니다.

이렇게 테스트 할 수있는 더 신뢰할 수있는 방법이 있습니까?

Answer 1

(. 나는 단지 CSS의 @media 쿼리가 아닌 자바 스크립트 솔루션을 찾고 있어요) 나는 방향으로 프로 아니에요하지만 어쩌면 당신은 같은 가로 방향의 경우 두 조건 모두 가질 수 있습니다

@media screen and (min-aspect-ratio: 13/9), screen and (orientation:landscape) 

Answer 2

을

CSS 전용 솔루션을 찾고 싶지만 @media 쿼리를 생성하는 데 JavaScript를 사용하는 방법을 생각했습니다.

JavaScript를 사용하여 방향 변경을 올바르게 감지 할 수 있다고 가정하면 적절한 규칙을 사용하여 style 태그를 동적으로 생성 할 수 있습니다. 당신이 할 때, 세로 모드에있어, 현재 문서의 너비에 따라 쿼리에 너비 제약 조건을 추가하십시오. 예 :

그런 다음 방향이 바뀌면 이러한 쿼리를 다시 생성하십시오. 아이디어는 세로 모드에서 @media 방향이 가로 방향으로 바뀌면 너비가 증가하지 않으면 가로 방향 쿼리를 사용하여 시작하지 않는다는 것입니다. 키보드 만 보여 주면 이런 일이 일어나지 않아야합니다.

나는 이것이 얼마나 믿을만한지는 모르지만, 지금까지는 나를 위해 일하고있다.