모바일 Safari 크롬의 높이를 찾으십니까?

Question

나는 창 높이에 따라 크기를 조정 한 후 브라우저에서 요소를로드하고 있어요 : 그것은 모바일 사파리를 제외한 모든 브라우저에서 괜찮 작동

 window_height = $(window).height(); 
     $("map-canvas").height(window_height); 

.

모바일 Safari의 경우 페이지에 올바른 높이의이로드됩니다.

하지만 곧바로 상단 브라우저 크롬이 사라집니다 (하단 버튼 막대가 남아 있지만).

이렇게되면 페이지 내용이 위로 이동하지만 하단에는 브라우저 크롬과 동일한 높이가됩니다.

브라우저 크롬의 높이를 찾고 보정하려면 어떻게해야합니까?

은 이상적으로는 (의사) 할 거라고 :

if browser chrome is visible: 
    subtract height of browser chrome from window height 
set map height to window height 
add event listener - when browser chrome disappears: 
    set map height to window height + height of browser chrome 

Answer 1

이벤트 리스너를 추가 - 브라우저 크롬이 사라질 때 세트 맵의 높이를 브라우저 크롬의 창 높이 + 높이

당신에게 창 크기 조정 이벤트를 사용할 수 있습니다.

window.resize = function(){ 
    document.getElementById('map-canvas').style.height = window.height + 'px'; 
} 

Answer 2

iOS 모바일 사파리에서 올바른 창 높이를 얻는 방법을 찾은 것 같아요. 비슷한 질문에 대한 대답을 확인하십시오. jQuery/JS, iOS 4 and $(document).height() problems

Answer 3

window.innerHeight 속성을 사용해야합니다. 이렇게하면 크롬의 화면 높이를 얻을 수 있습니다.

또한 window.screen 개체를 한번도 본 적이 없다면 다른 유용한 속성을 제공합니다.

예 :

window.screen

Screen { 
    availHeight: 1200, 
    availLeft: 1680, 
    availTop: 0, 
    availWidth: 1920, 
    colorDepth: 24, 
    height: 1200, 
    pixelDepth: 24, 
    width: 1920 
} 

window.innerHeight

916 

그래서 당신은 브라우저 크롬에서 크롬 284px를 차지 있음을 분명히 알 수 있습니다.

var browserChrome = (window.screen.height - window.innerHeight);