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

我在网络应用程序中制作了一个包含一些字段的表单。在 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)"/>

以下是我的 View 图片，但在用户选项卡时它不是缩放(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" />

---

Best Answer-推荐答案

试试

<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。较大的值 = 放大，较小的值 = 缩小

minimum-scale(0 到 10.0)用户可以“缩小”到的最小乘数。在移动版 Safari 上默认为 0.25。

ma​​ximum-scale(0 到 10.0)用户可以“放大”到的最小乘数。在移动版 Safari 上默认为 1.6。

关于javascript - 文本字段不会自动缩放焦点 [JQuery/Javascript]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25198903/