Here's the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I don't want it to zoom in - sounds easy, right?
Here's where it gets fun: I have to be able to zoom in general so don't say
<meta name='viewport' content='user-scalable=0'>
That won't work for me.
Also, the input box doesn't receive click events. It appears when another button is clicked a gets focus programmatically.
Here's what I've tried and they've failed so far:
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');
This also failed:
<input type='text' onfocus="return false">
And this:
jQuery("#locationLock input").focus(function(e){e.preventDefault();});
Any ideas? The answerer wins 10 internets (edit: And now 50 repution).
Source: Tips4all
My advice would be to take a look at the best practices for android web development. To be more specific, you may need to include more in your meta tag to prevent the zooming from occurring. For Example:
ReplyDelete<!-- set the screen width to the device width -->
<!-- set the viewport to be non-zoomable -->
<!-- fix the initial zoom to be 1:1 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Just a wild guess here, but what would happen if you had an iframe pointing to a page that doesn't not allow scaling?
ReplyDeleteCheck this this may work
ReplyDelete$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
also try this
input[type='text'],input[type='number'],textarea {font-size:16px;}
body{ -webkit-text-size-adjust:none;}
Incase anyone was wondering you can actually get around this whole input box zooming (certainly on an iTouch as it's all I have to test on) by making the input readonly.
ReplyDelete$("#your-input").focus(function(event){
event.preventDefault();
$(this).prop({ readOnly: true });
/*
Do your magic
*/
$(this).prop({readOnly:false});
});
I was really surprised to find nobody had yet tried this!
Hope this helps someone!.
/NodeX
Not possible!
ReplyDeleteI've got some bad news for you all. It's now been 6 months and no one has correctly answered the question.
Also I've finished working on that project and employer.
I'm afraid to say it, but exactly what I asked for is impossible. Sorry peoples. But I'm going to leave the question alive so people can see the other options.