Javascript web-app, 컨트롤 입력 포커스 및 흐림 효과로 확대/축소

Question

2 년 전 (LAMP 백엔드에서 JS/CSS/HTML) 웹 앱을 만들었습니다. 클라이언트는 이제 iPhone에서이를 사용하고 있으며 2 개의 입력이있는 로그인 화면에서 '너무 많이'확대되고 입력을 완료하면 '일반'확대/축소 수준으로 돌아 가지 않습니다 (그가 보낸 screengrabs에서, 그것은 'normal'과 입력에 입력 할 때 사용 된 줌 레벨 사이의 어떤 곳으로 줌하는 것처럼 보입니다.)

동작을 제어 할 수 있습니까? 사용자가 확장 가능한 메타에 대해 읽었습니다 : 0은 A) 전혀 작동하지 않거나 B) 줌 확대를 방지합니다.

나는 두 번째 문제가 더 중요하다고 말하고 싶습니다. 사용자가 텍스트를 입력 한 후 '보통'눈금으로 확대해야합니다.

다시 말씀 드리지만이 앱은 일반적인 웹 앱이며 'iPhone 앱'(코코아 또는 Objective-C가 아닌 기존 웹 기술을 기반으로 제작 됨)이 아닙니다. 나는 에뮬레이터를 사용할 수있는 iPhone 또는 Mac을 소유하고 있지 않으며, 내가 본 Windows 에뮬레이터는 그래픽의 iframe 이상일 것 같지 않습니다. 웹 사이트 원래 줌 배율로 돌아가 그에게

감사

Answer 1

당신이 옵션을 확대 사용자를두면, 그것은이다. 세로 모드의 Iphone safary 브라우저는 키보드 또는 콤보 박스가 열릴 때마다 확대/축소를 만듭니다. 그런 다음 원래 크기로 다시 확대하지 않습니다 (화면을 두 번 두드 리거나 화면을 두들겨서 수행해야합니다 ...).

다른 옵션은 뷰포트 메타 태그로 확대 사용자셔서되지

키보드가 열릴 때 또는 스피너가 임은 그것을 해결하는 방법을 찾고

(

을 열 때 다음 아이폰 못해 줌

 <meta name="viewport" id="view" content="user-scalable=no, width=device-width, initial-scale=1.0" /> 

키보드가 열렸을 때 확대/축소를 피할 수있는 확대/축소 기능을 병합)하지만 어떤 방법을 찾지 못했습니다 ...

Answer 2

나는 뷰포트를 가지고 노는 것으로 풀었다 : 당신이 말했듯이, 사용자 줌이 활성화되어 있지 않으면 키보드를 열거 나 콤보는하지 않는다. 확대/축소를 수행하지만 사용자가 확대/축소 기능을 느슨하게합니다. 콤보를 선택하면

나는 뷰포트에서 줌을 사용하지 않도록 설정 한 후 나는 두 번째 후 줌 옵션을 복원

document.documentElement.addEventListener("touchstart", function (event) { 
      if((event.target.nodeName == "SELECT") || (event.target.nodeName == "INPUT") || (event.target.nodeName == "TEXTAREA")) { //it is a combo 
       document.getElementById("view").setAttribute('content', 'width=device-width, user-scalable=no'); 
       setTimeout(function() { 
        document.getElementById("view").setAttribute('content', 'width=device-width, user-scalable=yes'); 
       }, 1000); 
      } 
      }, true); 

내 뷰포트 ID로 "보기"가 말을하지 않습니다.

예, 나는 그것이 최선의 해결책이 아니다 알아,하지만 작동 ...