菜鸟教程小白 发表于 2022-12-13 00:34:45

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


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

<p> <img src="/image/yufzn.jpg" alt="enter image description here"/> </p>

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

<p>我正在使用 <code>JQuery Mobile 1.4</code>，这是 <code>input field</code></p> 的代码

<pre><code>&lt;label for=&#34;fname&#34;&gt;First Name:&lt;/label&gt;
&lt;input type=&#34;text&#34; name=&#34;fname&#34; id=&#34;fname&#34; value=&#34;&#34; placeholder=&#34;First Name&#34; onKeyPress=&#34;restoreState(this)&#34;/&gt;
</code></pre>

<p>以下是我的 View 图片，但在用户选项卡时它不是缩放(Iphone Safari)
<img src="/image/zXciL.png" alt="enter image description here"/> </p>

<p><strong>更新</strong>
以下 <code>ViewPorts</code> 我试过了</p>

<pre><code>&lt;meta name=&#34;viewport&#34; content=&#34;initial-scale=1.0, user-scalable=no&#34; /&gt;
&lt;meta name=&#34;apple-mobile-web-app-capable&#34; content=&#34;yes&#34; /&gt;
&lt;meta name=&#34;apple-mobile-web-app-status-bar-style&#34; content=&#34;black&#34; /&gt;

                                  OR

&lt;meta name=&#34;viewport&#34; content=&#34;initial-scale=1.0, user-scalable=1&#34; /&gt;
&lt;meta name=&#34;apple-mobile-web-app-capable&#34; content=&#34;yes&#34; /&gt;
&lt;meta name=&#34;apple-mobile-web-app-status-bar-style&#34; content=&#34;black&#34; /&gt;
</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>试试</p>

<pre><code>&lt;meta name=&#34;viewport&#34; content=&#34;initial-scale=1.0, user-scalable=1&#34; /&gt;
</code></pre>

<p>Jquery 来做这个</p>

<pre><code>function AllowZoom(flag) {
if (flag == true) {
    $(&#39;head meta&#39;).remove();
    $(&#39;head&#39;).prepend(&#39;&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1, maximum-scale=10.0, minimum-scale=1, user-scalable=1&#34; /&gt;&#39;);
} else {
    $(&#39;head meta&#39;).remove();
    $(&#39;head&#39;).prepend(&#39;&lt;meta name=&#34;viewport&#34; content=&#34;width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0&#34; /&gt;&#39;);            
}
}
</code></pre>

<p>使用 <code>user-scalable=0</code>//zoomDisable</p>

<p>使用 <code>user-scalable=1</code>//zoomEnable</p>

<p><strong>更新:</strong></p>

<p><strong>initial-scale</strong>(0 到 10.0)设置初始显示后页面比例的乘数。安全的赌注:如果需要设置，请将其设置为 1.0。较大的值 = 放大，较小的值 = 缩小</p>

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

<p><strong>ma​​ximum-scale</strong>(0 到 10.0)用户可以“放大”到的最小乘数。在移动版 Safari 上默认为 1.6。</p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 文本字段不会自动缩放焦点 ，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/25198903/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/25198903/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 文本字段不会自动缩放焦点 [JQuery/Javascript]