2

I made a form in web app with some fields. In IOs Safari it should be zoom (i think) when user tap in it. Like in this picture

enter image description here

But my problem is that when i tab on it nothing happens like zoom. Only virtual keyboard is open. I also want to zoom.

I am using JQuery Mobile 1.4 and this is the code for input field

<label for="fname">First Name:</label>
<input type="text" name="fname" id="fname" value="" placeholder="First Name" onKeyPress="restoreState(this)"/>

following is my view picture but it is not zoom when user tab (Iphone Safari) enter image description here

Update Following ViewPorts i tried

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

                                  OR

<meta name="viewport" content="initial-scale=1.0, user-scalable=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Blu
  • 4,036
  • 6
  • 38
  • 65
  • try with onkeyup..@blu – Sumit Pathak Aug 08 '14 at 08:20
  • 1
    I think something is wrong with `meta viewport` – Mindaugas Večkys Aug 08 '14 at 08:22
  • @MindaugasVečkys i checked different values in `viewport` but nothing changes. – Blu Aug 08 '14 at 08:23
  • @SmartKiller onKeyUp? should i do some custom code for that? because am thinking its some feature in iphone/android? – Blu Aug 08 '14 at 08:24
  • @BluAngel is there such feature in iOS? So if i'm viewing a webpage and clicking a textfield, the whole thing zooms into the textfield..? I've seen the keyboard pushing things up, but haven't seen this before. – T J Aug 08 '14 at 08:29
  • `user-scalable=1` is wrong, it should be `user-scalable=yes` .. have you tried that? – urbz Aug 08 '14 at 08:30
  • @TilwinJoy There are alot question like that http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone that is why i am thinking it is some feature in these devices – Blu Aug 08 '14 at 08:34
  • @urbz yes i also tried with `yes` but didn't happened anything – Blu Aug 08 '14 at 08:34
  • Remove from `css` `input:focus` and `font-size` – Mindaugas Večkys Aug 08 '14 at 08:35
  • @MindaugasVečkys remove those from `JQuery Mobile` `css` file? – Blu Aug 08 '14 at 08:39
  • 1
    @BluAngel from all `css`. It privents from zooming [More here](http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone) – Mindaugas Večkys Aug 08 '14 at 08:45

1 Answers1

1

Try with

<meta name="viewport" content="initial-scale=1.0, user-scalable=1" />

Jquery to do this

function AllowZoom(flag) {
  if (flag == true) {
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1, user-scalable=1" />');
  } else {
    $('head meta[name=viewport]').remove();
    $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" />');              
  }
}

Use user-scalable=0 //zoomDisable

Use user-scalable=1 //zoomEnable

Updated:

initial-scale (0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out

minimum-scale (0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari.

maximum-scale (0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari.

cracker
  • 4,900
  • 3
  • 23
  • 41
  • is this value `maximum-scale=10.0` can be greater? i tried `20.0` but it give same zoom? i need some more – Blu Aug 08 '14 at 10:06
  • minimum-scale=1.0 This parameter tells Safari that a user should only be allowed to zoom out to the actual width of the web page. So if the web page is 320 pixels wide a user will only be able to zoom out to 320pixels. maximum-scale=10.0 This parameter tells Safari to allow a user to scale to 10 times the size of the site. – cracker Aug 08 '14 at 10:11
  • i think you also need to use this for the width of the device : – cracker Aug 08 '14 at 10:14
  • Thanks :) its much helpful now. – Blu Aug 08 '14 at 10:41
  • I tried ur solution with something like that `$(document).on('click',function(e){ if( $(e.target).is('input:text') ) { AllowZoom(true); } else { AllowZoom(false); } });` So when i click on fields that are type of text my pages zooms in but when i click outside that fields it didn't zoomout to normal page. Any thoughts how can i achieve that functionality – Blu Aug 08 '14 at 12:30
  • also if i select input of some other type after zoomin it back to normal state but not when i tap in some empty place on page it didn't zoom out that is so annoying :/ – Blu Aug 08 '14 at 12:32