文本字段不自动缩放焦点[JQuery / Javascript]

Question

我在网络应用中创建了一个带有一些字段的表单。在IOs Safari中，当用户点击它时，它应该是缩放（我认为）。就像在这张照片中一样

但我的问题是，当我选中它时没有像缩放那样发生。只有虚拟键盘打开。我也想放大。

我正在使用JQuery Mobile 1.4，这是input field

的代码

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

以下是我的查看图片，但在用户标签时不会缩放（Iphone Safari）

更新 在ViewPorts之后我尝试了

<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" />

Answer 1

尝试

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

Jquery这样做

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" />');              
  }
}

使用user-scalable=0 // zoomDisable

使用user-scalable=1 // zoomEnable

<强>更新

initial-scale （0到10.0）乘数，用于设置页面初始显示后的比例。安全投注：如果您需要设置它，请将其设置为1.0。较大的值=放大，较小的值=缩小

最小比例（0到10.0）用户可以“缩小”的最小乘数。在移动版Safari上默认为0.25。

最大比例（0到10.0）用户可以“放大”到的最小倍数。在移动版Safari上默认为1.6。