在Android网页上禁用缩放input焦点

这里是困境，我有一个网页（仅适用于Android设备），并在该页面中有一个input框（专门的文本框），当它获得焦点的浏览器放大。我不希望它放大 – 声音容易，对吗？

这里是它获得乐趣的地方：我必须能够放大一般，所以不要说

<meta name='viewport' content='user-scalable=0'> 

这对我不起作用。

此外，input框不会收到点击事件。 它出现时另一个button被点击获取焦点编程。

以下是我所尝试过的，迄今为止失败了：

 jQuery('head meta[name=viewport]').remove(); jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />'); jQuery("#locationLock input").focus(); jQuery('head meta[name=viewport]').remove(); jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />'); 

这也失败了：

 <input type='text' onfocus="return false"> 

和这个：

 jQuery("#locationLock input").focus(function(e){e.preventDefault();}); 

有任何想法吗？

Answer 1

以下为我工作（Android Galaxy S2）：

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/> 

Answer 2

不可能！

我对你们有一些坏消息。 现在已经6个月了，没有人正确回答这个问题。

我也完成了这个项目和雇主的工作。

我害怕说出来，但是我所要求的是不可能的。 对不起人民。 但是我要留下这个问题，以便人们可以看到其他的select。

Answer 3

我不知道这是否是最好的方式，但这对我和android和iphone的作品。

 input:focus { font-size: 16px!important} 

您只能使用媒体查询来定位移动设备。

Answer 4

规模问题导致放大input焦点

根据不同的屏幕分辨率和尺寸来确定内容的尺寸非常困难，最终导致这种缩放问题。

大多数移动浏览器都有一个input焦点的触发器（你不能毫无困难地跨越）：

 if (zoom-level < 1) zoom to 1.5 center focused input relative to screen 

*是的，这是过度简化。

元标记尺度修正的神话。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">如果缩小，所有这些视口设置都不会阻止input焦点缩放。 这些也不会超过任何其他HTML，身体，或元素的大小，将推动窗口的宽度比屏幕更宽。

主要原因

使用比设备屏幕尺寸更大的窗口或机身尺寸。

考虑Android智能手机的大部分Galaxy系列的标准屏幕尺寸：360 x 650.如果您的文档主体或窗口被定义为大于（比方说1024宽度，使其明显），可能会有一些东西发生：

1. 浏览器可以自动缩小，以适应屏幕的宽度。
   2. 用户可以这样做。
   3. 你可能已经完成了上述。
2. 浏览器将在后续访问页面时恢复缩放级别。
3. 您现在正以〜0.35倍的缩放查看内容。

初始状态1x

加载时，页面将不适合。 有些浏览器可能会缩小以适应窗口，但用户肯定会。 此外，如果您在此页面上缩小一次，则浏览器将存储缩放级别。

缩小以适应0.35x

一旦缩小，宽度将很好地适应，并有更多的垂直面积的页面将很好地填写屏幕…但…

请注意，浏览器现在处于文本和input（大小为普通1倍缩放）的状态，太小而无法读取，因此在获得焦点时触发在input字段上放大缩小的可用性行为。

放大input焦点1.5倍

在上述情况下的典型行为是放大到1.5倍，以确保input可见性。 结果（如果在缩小或更大的屏幕时将所有内容devise得更好）不太理想。

解决scheme1

使用CSS媒体规则，设备检测或任何最适合您情况的组合。 将窗口和主体设置为填充屏幕空间的大小，而不超过屏幕空间。

• 这就是为什么这么多的人成功地将input文字大小强制为16px;
  • 一旦你这样做，它清楚你的方式缩小。
  • 它还具有欺骗浏览器的额外好处，允许稍微缩小的窗口不会触发焦点缩放。

解决scheme2

使用元视口，但要小心的CSS宽度。

 <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

• 使用此方法时，您必须执行以下操作之一：
  • 只使用百分比的宽度。
  • 定义一个em宽度，并且只使用em和％作为宽度。
  • 请参阅解决scheme1以使用px宽度。

解决scheme3

jQuery.mobile $.mobile.zoom.disable();

只要确保从头开始，而不是从中间开始。

Answer 5

是的，这是可能的

 input[type='text'],input[type='number'],textarea {font-size:16px;} 

在Android 4.2浏览器和Android Chrome上testing

https://stackoverflow.com/a/6394497/4264

唯一的情况下，我发现它保持缩放是在Chrome设置 – >可访问性 – >文本缩放高于100％。

Answer 6

今天进入这个问题，并可能有一个铬更新即将下来，可以解决它的pipe道。 根据@Jo指出的铬问题，

no.28 jdd … @ chromium.org从https://codereview.chromium.org/196133011/开始; ，对具有移动优化视口的网站（例如，“width = device-width”或固定的页面缩放视口注释）。

在这些网站上聚焦可编辑元素时，可能仍会自动滚动，以保持元素的可见性，但缩放将被禁用。 这将在M41上演（距离testing版频道还有好几个星期）。

我们没有任何计划来防止传统桌面网站的自动缩放。

截至目前，Chrome是v.40; v.41在BETA中。 将检查是否继续在Android Chrome浏览器上丢失焦点。

Answer 7

我一直在寻找这个问题，因为这是我的HTML5 Android应用程序一直在刺激我的东西。 我可以提供一半的答案。 也就是说，当文本字段被聚焦时，如何停止页面缩放。

需要Jquery Mobile：

 $('#textfield').textinput({preventFocusZoom:true}); 

完全一样。

但是，正如我所说，这只能解决一半的问题。 另一半是允许用户以后再次缩放页面。 我发现的文档似乎表明这一点

  $('#textfield').textinput({preventFocusZoom:false}); 

要么

 $('#textfield').textinput('option','preventFocusZoom',false); 

应该解除它，但我没有设法得到任何选项工作。 如果您之后要将用户带到另一个页面，这并不是问题，但如果像我一样，只是通过AJAX加载内容，则用途有限。

编辑：虽然瞄准IOS，

 $.mobile.zoom.disable(); 

也停止缩放。 以更适当的通用方式。 但不幸的是

 $.mobile.zoom.enable(); 

无法像以前的代码一样恢复function。

Answer 8

 font-size: 18px; 

这固定了我的Nexus 7（2011）运行Android 4.3。

这个问题只存在于Nexus 7上，以下的设备都显得满意font-size：16px：

• HTC Desire Android 2.3.7
• Nexus 4 Android 4.3

希望这可以帮助别人！

Answer 9

这适用于#inputbox是input表单元素的id。

我正在使用这个来停止自动缩放IOS的search框，这是以前的post的一个mod，因为mouseover事件只会在第一次运行，但是不能触发后续的时间。 享受这是一个真正的拉毛…

 $("#inputbox").live('touchstart', function(e){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="user-scalable=0" />'); } ); $("#inputbox").mousedown(zoomEnable); function zoomEnable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="user-scalable=1" />'); } 

Answer 10

只是一个侧面说明：

meta name="viewport"的解决scheme完美的作品。 但是，Android中的本机浏览器和Chrome浏览器都具有名为“覆盖网站请求以控制缩放”的辅助function设置。 如果设置了此设置，则HTML，CSS或JavaScript中的任何内容都不能禁用缩放。

Answer 11

你需要2件事情：

在头脑中使用这样的元标记可以避免用户缩放：

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 

然后在你的CSS把类似下面的东西，以避免浏览器缩放：

 * { font-size:16px; } 

完成！ 我认为浏览器基于最小的字体或类似的东西来调整视口。 也许有人可以更好地解释它，但它的工作:)

Answer 12

工作模式

我们有这个Android的工作。 这里是关键： input的字体大小必须是合适的大小。 如果你的页面是320px宽，那么你需要16px的字体大小。 如果你的尺寸是640px，那么你需要32px的字体大小。

另外你需要以下

320宽版

 <meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, minimum-scale=1" /> 

640宽版

 <meta name="viewport" content="width=640, initial-scale=.5, maximum-scale=.5, minimum-scale=.5" /> 

注意：这不包含用户可扩展属性。 这将打破它。

Answer 13

对于任何试图将焦点放在隐藏的input字段时试图停止缩放的用户，可以将隐藏的input设置为与屏幕区域（或可视区域）一样大（或至less与之一样宽），这样会停止缩放。

例如

HIDDENinput.style.width = window.innerWidth;

HIDDENinput.style.height = window.innerHeight; （可选的）

Answer 14

这可能是很好的答案：

 input, textarea { max-width:100%; } 

不要使用<meta name=viewport content='user-scalable=no'>

Answer 15

我不确定您是否可以禁用缩放，但是您可以设置像这样的限制

  <meta id="viewport" name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"> 

最大规模= 0.5和最小规模= 0.5应该做的伎俩。 它为我工作。

Answer 16

如果您将input的字体大小设置为16px，则停止缩放。 移动浏览器假设小于16px意味着用户将需要缩放，所以为什么我不这样做自己。

  input[type='text'],input[type='number'],textarea {font-size:16px;} body{ -webkit-text-size-adjust:none;} 

您也可以设置下面的meta标签，但是它会阻止用户完全缩放。

 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;"/> 

如果你想要用户缩放，但只能禁用input缩放尝试这一点

 $("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable); function zoomDisable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="user-scalable=0" />'); } function zoomEnable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="user-scalable=1" />'); } 

也试试这个

Answer 17

也许你可以通过将缩放比例重置为1.0来避免缩放。 在我的Android（HTC Wildfire S）上，我可以将缩放比例重置为1.0，如下所示：

 $('meta[name=viewport]').attr('content', 'initial-scale=1.0, maximum-scale=0.05'); 

但是这会将视口移动到0,0（页面的左上angular）。 所以我$().scrollLeft(...)和.scrollTop(...)再次回到form 。

（ initial-scale=1.0, maximum-scale=0.05是我的viewport meta的初始值。）

（我这样做的原因不是为了防止Android缩放，而是为了将缩放重置为已知的规模，因为其他Android bug，否则会损坏screen.width和其他相关的值。）

Answer 18

试试这个，它适用于我的设备：

 <meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" /> 

但是，当我双击input框，键盘向上滑动，使页面高度降低。

Answer 19

我偶然发现这个：

  input { line-height:40px; } 

将阻止我的Galaxy Nexus上的input与谷歌Android版本18的缩放，但这可能是特定于我的情况：

 <meta name='viewport' data='width=800'> 

所以为了将来的参考，如果你通过谷歌来到这里，这可能是其他解决scheme之一。

Answer 20

我有同样的问题（只在Android Chrome浏览器）。 我解决了这个问题。

1. 检测到userAgent，并绑定文本字段的onFocus和onBlur事件，以如下方式更改视口元内容

    if ((navigator.userAgent.match(/Android/i)) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) { isAndroidChrome = true; } var viewportmeta = document.querySelector('meta[name="viewport"]'); 

2. 我设置了以下视口元内容： viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';

3. 我将视口元内容重置为viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4'; 您可以根据需要设置最大规模，或者如果您希望它是用户可扩展的，则不要设置最大规模

当你改变触发器的input的onFocus事件，如果maximum-scale是1 ，它不放大。这对我来说就像一个魅力。 希望它也适用于你。

Answer 21

正如@soshmo所说， user-scalable不是WebKit喜欢的属性，因此它的包含会导致WebKit放弃整个视口标记。 我也发现这是maximum-scale设置为1以外的任何情况，并没有停止变焦。

重置每个focus和blur事件的viewport为我工作：

 var htmlWidth = parseInt($('html').outerWidth()); var screenDPI = parseInt(window.devicePixelRatio); var screenWidth = parseInt(screen.width); var screenHeight = parseInt(screen.height); var scaleVal = (((screenWidth * screenDPI) / htmlWidth)/screenDPI); $('input[type="text"], input[type="password"], input[type="email"]').each(function() { //unchained for clarity $(this).focus(function() { $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height"); // Do something to manage scrolling the view (resetting the viewport also resets the scroll) $('html, body').scrollTop(($(this).offset().top - (screenHeight/3))); }); $(this).blur(function() { $('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height"); }); }); 

如果您发现设置/重置viewport值得检查WebKit接受您正在使用的内容属性。 我花了一段时间才意识到，使用像user-scalable这样的东西会导致viewport被丢弃，所以即使JavaScript工作，变化也不会受到影响。

Answer 22

在touchstart上设置视口用户可扩展的属性为我做了，不需要删除然后重新添加只需在touchstart上改变它，然后再次启用模糊。 意味着用户不能放大，而集中在该领域，但我认为一个小的代价。

 var zoomEnable; zoomEnable = function() { $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=yes"); }; $("input[type='text']").on("touchstart", function(e) { $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=no"); }); $("input[type='text']").blur(zoomEnable); 

Answer 23

对于Nexus 7，当我的媒体查询时，我遇到了这个问题 –

@media screen and (max-device-width: 600px) and (orientation : portrait)

所以我用下面的媒体查询来解决这个问题 –

@media screen and (max-device-width: 600px) and (max-aspect-ratio: 13/9)

Answer 24

晚了点晚了，但我昨天花了整整一个下午去了这个职位之前疯狂，并认识到这是Android的function/错误。 所以我会发布我的解决scheme。 这工作对我来说，仍然使用户缩放：

元：

 <meta id="meta1" name="viewport" content="width=device-width,initial-scale=1,minimal-ui"/> 

CSS：

 html{ position:absolute; overflow:-moz-scrollbars-vertical; overflow-y:scroll; overflow-x:hidden; margin:0;padding:0;border:0; width:100%; height:100%; } body{ position: relative; width: 100%; height: 100%; min-height:100%; margin: 0; padding: 0; border: 0; } 

设置HTML position:absolute和overflow-x:hidden做了我的伎俩。

Answer 25

为星系工作4：
将代码添加到HTML标头索引文件中：

 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/> 

Answer 26

我发表了一个答案，因为我遇到了类似的问题，我解决了它。

我的情况如下。

html头部的视口设置是

 <meta name="viewport" content="width=640"> 

代理是Android默认浏览器。
它们不是Chrome，Firefox和Safari。
Android版本在4.2.x下。

我们的情况细节不一样，但我认为他们有一个基本平等的问题。

我解决了它将“target-densitydpi = device-dpi”添加到meta [name = viewport]标签。

 <meta name="viewport" content="width=640, target-densitydpi=device-dpi"> 

试试吧。

但是我不得不说“target-densitydpi = device-dpi”会有副作用。

不好的情况在这里。

1. Android OLD浏览器读取“target-densitydpi = device-dpi”。
2. 它转到另一个没有target-densitydpi属性的页面。
3. 浏览器开始将页面渲染为“target-densitydpi = device-dpi”。
4. 所以它会渲染下一页错误的比例因子。

这种情况下的解决scheme是在转到下一页之前，使用javascript将“target-densitydpi”属性从“device-dpi”重写为“medium-dpi”。

一个使用jQuery的例子。

 <a href="go-to-the-other" class="resetDensityDpi">Other page</a> <script> $(function(){ $('.resetDensityDpi').click(function(){ var $meta = $('meta[name="viewport"]'); $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=device-dpi/, 'target-densitydpi=medium-dpi')); return true; }); }); </script> 

而且…这个代码引起一个新的问题。
有些浏览器在使用后退button返回上一页时使用caching数据呈现JavaScript过程的结果。 所以他们显示前一页为“target-densitydpi = medium-dpi”而不是“target-densitydpi = device-dpi”。

这个解决scheme正好与上面相反。

 <script> $(function(){ var rollbackDensityDpi = function() { // disable back-forword-cache (bfcache) window.onunload = function(){}; var $meta = $('meta[name="viewport"]'); if ($meta.attr('content').match(/target-densitydpi=medium-dpi/)) { $meta.attr('content', $meta.attr('content').replace(/target-densitydpi=medium-dpi/, 'target-densitydpi=device-dpi')); } }; if (window.addEventListener) { window.addEventListener("load", rollbackDensityDpi, false); } else if (window.attachEvent) { window.attachEvent("onload", rollbackDensityDpi); } else { window.onload = rollbackDensityDpi; } }); </script> 

谢谢。

Answer 27

保持内容比窗口更窄。

从一开始就必须devise你的页面，但这是完全有效的。

关键是使用@media css at-rule只允许组件具有宽度，您知道屏幕足够大以容纳这些宽度。

例如，如果设置了内容宽度，以便文本不会在较大的显示器上分散显示，请确保宽度仅适用于大屏幕：

 @media (min-width: 960px){ .content{ width : 960px; } } 

或者，也许你有一个500像素的图像，你可能不得不把它隐藏在较小的屏幕上：

 @media (max-width: 500px){ .image{ display : none; } } 

Answer 28

将这个元标记添加到您的HTML文件，它将解决这个问题。

 <meta name="viewport" content="width=device-width, user-scalable=no" /> 

在HTC渴望816和SAMSUNG GALAXY S5中join这一行解决了我的问题。

Answer 29

这可能是解决这类问题的方法

 <meta name="viewport" content="user-scale=no"/> <meta name="viewport" content="width=device-width"/> <meta name="viewport" content="width=device-width, maximum-scale=0.9"/> 

Answer 30

我的build议是要看看Android网站开发的最佳做法 。 更具体地说，你可能需要在你的元标记中join更多的元素来防止缩放。 例如：

 <!-- set the screen width to the device width --> <!-- set the viewport to be non-zoomable --> <!-- fix the initial zoom to be 1:1 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">