Javascript web-app, control iPhone zooming on input focus and blur

Question

I created a web-app a couple years ago (JS/CSS/HTML over a LAMP backend) which has been working fine. The client is now using it on his iPhone, and reports that when on a login screen with 2 inputs, the window zooms in 'too much' and when he's done entering input, it doesn't zoom back to the 'normal' zoom level (from screengrabs he sent, it looks like it zooms back to somewhere between 'normal' and the zoom level used when typing into the input).

Is it possible to control either behavior? I've read about the meta of user-scalable:0 but that sounds like it'd either A) not work at all or B) prevent zooming altogether.

I'd say the second issue is more critical (after the user inputs text, it should zoom back to 'normal' scale).

i'll mention again this is a generic web-app and not an 'iPhone app' (it's built on traditional web technologies, not Cocoa or Objective-C). I don't even own an iPhone, or a Mac that I can use an emulator on, and the windows emulators I've seen seem to be nothing more than iframes in a graphic.

thanks

Answer 1

If you leave user zooming option, it is up to him to go back to website original zoom scale. Iphone safary browser in portrait mode makes a zoom-in, everytime keyboard or combobox is opened. Then it does not zoom back to original scale (it has to be done by double tapping the screen or pinching the screen...).

Other option is not letting the user zooming with viewport meta tag

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

Then iphone wont zoom when keyboard is opened or when spinner is opened

Im currently looking for a way of solving it (merge zooming possibility with avoiding zoom when keyboard opens), but I did not find any way to do it...

Answer 2

I solved it playing with viewport: As you said, when there is not user zoom enabled then openning keyboard or combo does not make zoom, but then you loose zooming feature for users.

I disable zoom on viewport when a combo is selected and then I restore zoom option after one second:

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);

Not to say that my viewport has "view" as id.

Yes, I know it is not best solution, but it works...