iPhone 웹 앱에서 바닥 글/툴바를 만들려면 어떻게해야합니까?

Question

웹 응용 프로그램에서 작업 중이므로 div를 뷰포트 아래쪽에 붙여야합니다. 항상 볼 수 있으며 항상 뷰포트 아래쪽에 있습니다. 여기에 내가 원하는 것의 예가 있습니다 : footer. 불행히도, 이것은 아이폰에서 작동하지 않습니다. 내가 자바 스크립트를 사용하여 이것을 할 몇 가지 방법을 생각할 수 있지만 오히려 않을 것입니다. css 만 사용하여 iPhone에서이 효과를 얻는 방법에 대한 아이디어가 있습니까?

Answer 1

수 없습니다. 적어도 당신이 생각하는 방식은 아닙니다.

당신은 전체 가짜가 자바 스크립트입니다. iScroll

모바일 사파리는 일종의 고정 위치 지정을 전혀 지원하지 않습니다. 따라서 페이지 크기를 화면 크기와 동일하게 설정 한 다음 자바 스크립트를 사용하여 터치를 처리하고 스크롤 오프셋을 설정하고 스크롤 막대를 애니메이션으로 만들거나 수동으로 스크롤하지 않아야합니다.

제가 링크 한이 스크립트는 여러분에게 많은 도움이되지만, 네이티브 솔루션만큼 강력하지는 않습니다.

Answer 2

다음은 CSS3, HTML 및 JavaScript를 결합하여 iPhone 용 navbar를 만드는 방법에 대한 예입니다. http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/

ps : 가로 모드에서도 작동합니다.

Answer 3

다음은 코드가있는 작업 예제입니다. 그것은 심장 약한되지 않습니다 :

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

Answer 4

훨씬 쉽게 작동 할 수 이것에 대한 새로운 자바 스크립트가 : http://joehewitt.github.com/scrollability/

따라서에서 iOS 5에서이 수정 될 것입니다 위치와 오버 플로우 스크롤이 가능합니다!

Answer 5

이 상황은 iOS 5에서 변경되었습니다. 이제 overflow:scroll 또는 position:fixed을 사용할 수 있으며 예상 한대로 작동합니다. 예를 들어,이 코드 유형 :

<header style=" 
    position: fixed; top: 0; left: 0; 
    width: 100%; height: 20px; font-size: 20px"> 
    Heading 
</header> 
<article style="margin: 20px 0"> 
    Your page here 
</article> 
<footer style=" 
    position: fixed; bottom: 0; left: 0; 
    width: 100%; height: 20px; font-size: 20px"> 
    Footer 
</footer> 

는 ... 문제없이 작동합니다. 이전의 iOS 버전을 실행하는 많은 장치가 여전히가 있지만, 그래서 당신은 당신이 자바 스크립트로 테스트 할 수 있습니다 오래된 장치에 게으른 부하 Scrollability로 할 수 있습니다 :

var isios = navigator.appVersion.match(/CPU(iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i); 
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z] 
if (isios && isios[2] < 5){ 
    // load scrollability here. jquery example: 
    $.getScript("/js/scrollability.min.js", function() { 
     // code to run when scrollability's loaded 
    } 
}