가로 방향을 인식하도록 미디어 쿼리를 얻는 방법은 무엇입니까?

고정 바닥 글이있는 JQM 앱이 있습니다. 키보드가 보여 질 때 렌더링 문제를 해결하기 위해 화면의 최소 높이가 특정 수보다 많으면 .ui-footer-fixed 클래스의 가시성을 볼 수 있도록 설정하는 몇 가지 CSS3 미디어 쿼리를 발견했습니다. 픽셀을 기준으로합니다.가로 방향을 인식하도록 미디어 쿼리를 얻는 방법은 무엇입니까?

세로 모드 화면 크기와 방향이 올바르게 감지되어 키보드를 표시하거나 숨길 때 예상대로 클래스를 표시하거나 숨 깁니다. 그러나 가로 모드에서는 가로 방향이 감지되지 않고 숨겨진 기본 표시가 대신됩니다.

이 이러한 미디어 쿼리 설정하는 관련 스크립트입니다

var win = $(window), 
    height = win.height(), 
    width = win.width(); 

document.write([ 
    "<style>", 
    ".ui-footer-fixed { visibility: hidden; }", 
    "@media screen and (orientation: portrait) and (min-height: " + (Math.max(width, height) - 10) + "px)", 
    "{ .ui-footer-fixed { visibility: visible; }", 
    "@media screen and (orientation: landscape) and (min-height: " + (Math.min(width, height) - 30) + "px)", 
    "{ .ui-footer-fixed { visibility: visible; }", 
    "</style>" 
].join(" "));

내가 무슨 일을하고 있는가?

덕분에, 마태 복음

출처

2014-04-04 Matthew Belk

미디어 쿼리는 방향을 고려하지 않습니다. 화면 크기, 화면 해상도, 화면 또는 인쇄물 여부를 감지 할 수 있습니다. 아마도 JavaScript를 사용하여 양식 요소에 포커스가 있는지 여부를 감지 할 수 있습니다 (키보드가 표시됨을 의미 함)? 또는 자바 스크립트를 사용하고 있기 때문에 단순히'win.width()> win.height()'를 체크하면됩니다. 가로 모드이면 가로 모드입니다. – Blazemonger

쉬운 방법은 'orientauonchange' 이벤트를 듣고, 가로면 두 도구 모음의 고정을 해제하십시오. – Omar

하지만 방향을 전환 할 때 고정 바닥 글이 나타나고 사라지기 때문에 브라우저 (iPhone5 에뮬레이션 모드의 Chrome 또는 실제 iPhone)가 세로에서 가로로 변경되는 것에 응답합니다. 내 가로 미디어 쿼리와 일치하지 않는 것 같습니다. FWIW, 가로로 장치가있는 페이지를로드하는지 또는 사이트를로드 한 후 방향을 변경하는지 여부와 관계없이 발생합니다. –

대답은 내가 시도 원래 솔루션에 누워 있지만,이 @media 쿼리에서 누락 된 일부 닫는 중괄호가 있었다.

솔루션이 SO 게시물에서 온 : 가로 방향을 인식하는 미디어 쿼리를 얻을하는 방법을 질문에 대한 답변에서 jquery-mobile-hide-fixed-footer-when-keyboard

출처

2014-04-07 14:07:21

@media screen and (orientation:landscape) 
{ 
    body 
    { 
     background: red; 
    } 
}

출처

2015-10-20 01:09:02

가로 방향을 인식하도록 미디어 쿼리를 얻는 방법은 무엇입니까?

답변

관련 문제