브라우저의 하단이 아닌 모바일 뷰포트 하단에 div 위치 지정을 시도합니다.

Question

모바일 브라우저 (Safari + Android) 뷰포트 하단에 위치시키려는 div가 있습니다. 현재 내 div는 Windows (IE, FF, Saf, Chrome, Opera)의 상위 5 개 브라우저에서 하단에 고정되었지만 "브라우저 창"이지 "뷰포트"가 아닙니다.

휴대 기기의 경우 (Android 2.2의 경우 삼성 갤럭시 탭에서만 시도했습니다) div가 페이지 하단에 표시되지만 핀치/펀치로 확대하면 고정 div가 따르지 않습니다. . 뷰포트 외부에서 뒤에 있습니다.

나는 position : fixed와 bottom : 0 CSS 속성을 사용하여 위치를 유지하고 있으며, 말했듯이, 비 - 터치 브라우저에서는 잘 동작합니다.

나는 viewmove 이벤트에 연결하고 (a) 확대/축소 수준을보고 (뷰포트 맨 아래에 있음) 위치에 div를 유지해야한다고 생각합니다. b) 뷰포트 위치 및 (c) 스크롤 위치?

JavaScript를 사용하여 인라인 CSS를 사용하는 대신 페이지에 div를 삽입하고 있습니다. 좋은 점은 (웹킷 브라우저 만 타겟팅하는 것처럼) 단점 모드에 대해 걱정할 필요가 없다는 점입니다. 따라서 이것이 긍정적 인 점입니다.

doctype을 설정할 수 없으며 인라인 CSS 또는 인라인 DIV를 사용할 수 없습니다. JavaScript를 통해 모든 것을 동적으로 추가해야합니다. 여기에 지금까지 내 테스트에서 수행 한 작업은 다음과 같습니다

var mydiv=document.createElement("div"); 
mydiv.style.position="fixed"; 
mydiv.style.bottom="0px"; 
mydiv.id="floater"; 
mydiv.style.width="400px"; 
mydiv.style.height="50px"; 
mydiv.style.backgroundColor="yellow"; 
if(document.body)document.body.appendChild(mydiv); 
document.getElementById("floater").innerHTML="HELLO"; 

Answer 1

귀하의 position:fixed 모바일 웹킷 브라우저에서 작동하지 않습니다.the mobile webkit fixed position problem을 http://www.position-absolute.com/에서 살펴보십시오. 그들은 바닥에 무언가를 지키는 몇 가지 방법이 있습니다.

Answer 2

체크 아웃 iScroll는 -로보고 확실히 가치
http://cubiq.org/iscroll-4

거기에 더 나은 옵션 중 하나가 될 것으로 보인다.

이전 버전의 iScroll을 사용했지만 불행히도 표준에 맞지 않는 몇 가지 사항이있어서 아이디어를 고쳐야했습니다. 그러나 Cubiq의 사람들은 이전 버전에서 많은 문제를 해결할 것이라고 약속 한 iScroll의 v4를 방금 출시했습니다.

행운을 빈다.
Dan