100 % 높이의 iPhone 주소창을 숨기기

Question

내 게시물에 대한 글은 많지만 내 상황에는 그다지 중요하지 않습니다. 내 페이지에는 100 % 너비 및 100 % 높이로 설정된 유연한 크기가 있으므로 일반적인 온로드 스크롤 기능이 작동하지 않습니다. 어떤 생각이나 다른 해결책?

감사합니다.

는 CSS :

* { 
    margin:0; 
    padding:0; 
} 
html, body { 
    width:100%; 
    height:100%; 
    min-width:960px; 
    overflow:hidden; 
} 

자바 스크립트 :

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    window.scrollTo(0, 1); 
    }, 1000);​ 

Answer 1

은 나도이 고생. 처음에는 200 % 높이와 오버플로를 정의한 CSS 클래스 (. 스트레치)를 시도한 다음 scrollTo 전후의 스크립트를 통해 HTML에서 이것을 토글했다. 계산 된 100 % 높이가 사용 가능한 뷰포트 크기에서 모든 브라우저 크롬 (상태 표시 줄을 다시 제자리에 고정)을 참조하기 때문에 이는 작동하지 않습니다.

결국 DOM API를 통해 동적으로 적용 할 특정 스타일을 요청해야했습니다. 귀하의 추가 조각에 추가하려면 :

나는 작은 안드로이드/iOS의 사파리 scrollTo 차이를 해결 스콧 Jehl의 방법을 확장 권하고 싶습니다 그러나

var CSS = document.documentElement.style; 

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function() { 
    CSS.height = '200%'; 
    CSS.overflow = 'visible'; 

    window.scrollTo(0, 1); 

    CSS.height = window.innerHeight + 'px'; 
    CSS.overflow = 'hidden'; 
}, 1000);​ 

는 :

https://gist.github.com/1183357

Answer 2

네이트 스미스에서이 솔루션은 나를 도와 : How to Hide the Address Bar in a Full Screen Iphone or Android Web App. blog post 또는 Gist 자신을 확인, 자세한 내용은

var page = document.getElementById('page'), 
    ua  = navigator.userAgent, 
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'); 

var setupScroll = window.onload = function() { 
    // Start out by adding the height of the location bar to the width, so that 
    // we can scroll past it 
    if (ios) { 
    // iOS reliably returns the innerWindow size for documentElement.clientHeight 
    // but window.innerHeight is sometimes the wrong value after rotating 
    // the orientation 
    var height = document.documentElement.clientHeight; 
    // Only add extra padding to the height on iphone/ipod, since the ipad 
    // browser doesn't scroll off the location bar. 
    if (iphone && !fullscreen) height += 60; 
    page.style.height = height + 'px'; 
    } 
    // Scroll after a timeout, since iOS will scroll to the top of the page 
    // after it fires the onload event 
    setTimeout(scrollTo, 0, 0, 1); 
}; 

:

다음은 필수 비트입니다.