2012-10-24 4 views
1

jQuery와 hammer.js를 터치 컨트롤에 사용하는 모바일 웹 앱을 만들고 있습니다. hammer.js에는 "prevent_default"라는 기능이있어서 Safari의 스크롤/확대/축소 기능을 해제합니다. 텍스트 필드의 경우 < 입력을 사용하는 양식이 있고 양식을 탭하면 .focus()를 호출하는 자바 스크립트 수신기가 있습니다.모바일 사파리 웹 응용 프로그램 확대 문제

이 점은 모두 한 지점까지 잘 작동합니다. 페이지는 제자리에 고정되어 있으며 실제로보기가 쉽습니다. 양식 필드를 클릭하면 확대되고 iOS 키보드가 나타납니다. 문제는 사용자가 텍스트 입력을 마쳤을 때 축소 할 방법이 없다는 것입니다. 브라우저가 .focus()에서 확대되어 브라우저 막대가 사라지고 브라우저 탭을 닫고 새로 고치는 대신 URL에 다시 입력해야합니다.

브라우저가 처음보기로 축소되도록하는 방법을 찾고 있습니다. 나는 인터넷을 통해 몇 가지 해결책을 찾았지만 아직 아무것도 찾지 못했다.

나는 처음부터 줌을 사용하지 않도록 설정하는 헤더의 뷰포트 메타 태그를 가지고 있지만 해키 솔루션을 집중하고 뷰포트 속성을 변경 한 후 inputfield를 흐리게하는 것입니다이 문제

답변

0

해결에 도움이되지 않습니다. 사파리 앞서보고 그렇지 않으면 무시하는 것 때문에

function refreshViewportZoom(){ 
    var viewport = document.querySelector("meta[name=viewport]"); 
    viewport.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, scale=0.5, user-zoom=0.5, zoom=0.5'); 
    document.getElementById('myInputField').focus(); 
    setTimeout(blurLater,2000); 
} 

function blurLater(){ 
    document.getElementById('myInputField').blur(); 
} 

blurLater

는, 함수로 필요하다.

+0

잘 작동하는 것으로 보이는이 솔루션을 발견했습니다. 사파리가 확대하려고 시도 할 때만 장애가됩니다.이 현상을 다시 줌하면 화면 흔들림이 발생합니다. https://gist.github.com/2008932 –

관련 문제