在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();}); 

有任何想法吗?

以下为我工作(Android Galaxy S2):

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

不可能!

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

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

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

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

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

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

规模问题导致放大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. 浏览器可以自动缩小,以适应屏幕的宽度。
    1. 用户可以这样做。
    2. 你可能已经完成了上述。
  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();

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

是的,这是可能的

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

在Android 4.2浏览器和Android Chrome上testing

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

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

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

no.28 jdd … @ chromium.org自https://codereview.chromium.org/196133011/&#x8D77; ,在具有移动优化视口的网站(例如“width = device-width”或固定页面缩放视口注释)。

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

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

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

我一直在寻找这个问题,因为这是我的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。

 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

希望这可以帮助别人!

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

我正在使用这个来停止自动缩放IOS的search框,这是以前的post的一个模块,因为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" />'); } 

只是一个侧面说明:

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

你需要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; } 

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

工作模式

我们有这个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" /> 

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

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

例如

HIDDENinput.style.width = window.innerWidth;

HIDDENinput.style.height = window.innerHeight; (可选的)

这可能是很好的答案:

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

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

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

  <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应该做的伎俩。 它为我工作。

如果您将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" />'); } 

也试试这个

也许你可以通过将缩放比例重置为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和其他相关值。

试试这个,它适用于我的设备:

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

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

我偶然发现这个:

  input { line-height:40px; } 

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

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

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

我有同样的问题(只在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-scale1 ,它不放大。这对我来说就像一个魅力。 希望它也适用于你。

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

重置每个focusblur事件的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工作,变化也不会受到影响。

在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); 

对于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)

晚了点晚了,但我昨天花了整整一个下午去了这个职位之前疯狂,并认识到这是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:absoluteoverflow-x:hidden做了我的伎俩。

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

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

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

我的情况如下。

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> 

谢谢。

保持内容比窗口更窄。

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

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

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

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

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

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

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

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

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

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

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

我的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">