CSS, 쿼리 또는 js를 사용하여 가로 모드를 감지하고 HTML 콘텐츠를 숨기는 방법

Question

내 반응 형 웹 사이트에서 모바일 장치에서 웹 사이트를 보는 방식을 제어하고 가로 모드에서보기를 금지하고 싶습니다.

나는 stackoverflow 사이트를 검색하여 경고 메시지를 표시하는 옵션을 발견했습니다.

아래의 CSS 코드를 시도했지만 작동하지 않았습니다. 의견 있으십니까? '높이'미디어 기능의 값보다 크거나 '폭'미디어 기능의 값과 동일 할 때

@media screen and (max-width: 980px) and (orientation:portrait){ 
    #warning-message { 
     display:none; 
    } 
} 

@media screen and (max-width: 980px) and (orientation:landscape){ 
    .content { 
     display:none; 
    } 
    .mobile { 
     display:none; 
    } 
    #warning-message { 
     display:block; 
    } 
} 

Answer 1

'방향'미디어 기능 '세로'이다. 그렇지 않으면 'orientation'이 'landscape'입니다.

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

출처 :의 https://www.w3.org/TR/css3-mediaqueries/#orientation