OStack程序员社区-中国程序员成长平台

标题: javascript - 文本字段不会自动缩放焦点 [JQuery/Javascript] [打印本页]

作者: 菜鸟教程小白    时间: 2022-12-13 00:34
标题: javascript - 文本字段不会自动缩放焦点 [JQuery/Javascript]

我在网络应用程序中制作了一个包含一些字段的表单。在 IOs Safari 中,当用户点击它时,它应该是缩放的(我认为)。就像这张照片中的一样

enter image description here

但我的问题是,当我点击它时,没有任何事情像缩放一样发生。只有虚拟键盘是打开的。我也想放大。

我正在使用 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) enter image description here

更新 以下 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/






欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/) Powered by Discuz! X3.4