缩放问题导致缩小输入焦点

Question

这是困境，我有一个网页（仅适用于Android设备），在该页面中我有一个输入框（专门用于文本框），当它获得焦点时，浏览器会放大。我不希望它放大in - 听起来很简单，对吧？

这里有趣的地方：我必须能够放大，所以不要说

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

这对我不起作用。

此外，输入框不会收到点击事件。当单击另一个按钮时，它会以编程方式获得焦点。

这是我尝试过的，到目前为止它们已经失败了：

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个月了，没人能正确回答这个问题。

此外，我已经完成了该项目和雇主的工作。

我不敢这么说，但我所要求的确实是不可能的。对不起人民。但是我要把这个问题保留下来，以便人们可以看到其他选择。

Answer 3

我不确定这是不是最好的方法，但这对我和Android和iphone都适用。

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

您可以使用媒体查询仅定位移动设备。

Answer 4

缩放问题导致缩小输入焦点

在调整不同屏幕分辨率和大小的内容时存在很大的困难，最终导致此缩放问题。

大多数移动浏览器都会在输入焦点上触发（您可以毫不费力地超越）：

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"> 如果缩小，所有此类视口设置将不会阻止输入焦点缩放。这些也不会覆盖任何其他的html，正文或元素大小，这会将窗口推向宽度比屏幕宽。

主要原因

使用大于设备屏幕尺寸的窗口或主体尺寸。

考虑大多数Android系列Android智能手机的标准屏幕尺寸：360 x 650。如果您的文档正文或窗口被定义为大于那个（让我们说1024宽以使其显而易见），可能会发生以下几件事：

浏览器可以自动缩小，以适应屏幕的宽度。
1. 用户可以执行以上操作。
2. 您可能已经完成了上述任务。
浏览器将在后续访问该页面时恢复缩放级别。
您现在正以~0.35倍变焦查看内容。

初始状态1x

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

缩小以适合0.35x

一旦缩小，宽度将很好地适应，并且具有更多垂直区域的页面将非常好地填充屏幕......但是......

请注意，浏览器现在处于一种状态，其中文本和输入（正常1倍缩放的大小）太小而无法读取，从而触发了在输入焦点获得焦点时缩放输入字段的可用性行为。

放大输入焦点1.5x

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

解决方案1

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

这就是为什么这么多人成功将输入文本大小强制为16px;
- 一旦你这样做，很明显你已经缩小了。
- 它还有一个额外的好处，就是欺骗浏览器允许稍微缩小的窗口不会触发焦点缩放。

解决方案2

使用元视口，但请注意css宽度。

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

使用此方法时，您必须执行以下操作之一：
- 仅使用宽度百分比。
- 定义em宽度，仅使用em和％作为宽度。
- 请参阅解决方案1以了解使用px宽度。

解决方案3

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

请确保从一开始就开始使用它，而不是从中间开始。

Answer 5

是的，可能

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

在Android 4.2浏览器和Android Chrome中测试过。

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

我发现它一直保持缩放的唯一情况是在Chrome中使用设置 - ＆gt;可接受性 - ＆gt;文字缩放率高于100％。

Answer 6

今天进入这个问题，可能很快就会有一个可以解决问题的铬更新。根据@Jo指出的chromium问题，

no.28 jdd ... @ chromium.org自https://codereview.chromium.org/196133011/起，在具有移动设备优化视口的网站上禁用自动投影（例如，＆＃34; width =设备宽度＆＃ 34;或固定页面缩放视口注释）。

在将可编辑元素聚焦在此类网站上时，可能仍会自动滚动，以保持元素的可见性，但缩放将被禁用。这将在M41上发布（距离测试频道还有很长时间）。

我们没有计划以其他方式阻止旧版桌面网站的自动投放。

截至目前，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();

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

Answer 8

font-size: 18px;

这修复了我运行Android 4.3的Nexus 7（2011）。

此问题仅适用于Nexus 7，以下设备均显示为font-size：16px：

HTC Desire Android 2.3.7
Nexus 4 Android 4.3

希望这有助于某人！

Answer 9

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

我正在使用它来停止自动缩放IOS中的搜索框，因为鼠标悬停事件只能在第一次工作但无法触发后续时间，因此上面的帖子中有一个mod。享受这个真正的拔毛器...

$("#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" 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 11

只是旁注：

meta name="viewport"的解决方案完美无缺。但是，Android中的原生和Chrome浏览器都有一个名为＆＃34;覆盖网站的控制缩放的请求设置＆＃34;。如果设置了此设置，则HTML，CSS中没有任何内容，或JavaScript可以禁用缩放。

Answer 12

对于在尝试聚焦隐藏输入字段时试图停止缩放的任何人，您可以将隐藏输入设置为与屏幕区域（或可视区域）一样大（或至少与其一样宽） - 这会使其停止缩放

e.g。

HIDDENinput.style.width = window.innerWidth;

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

Answer 13

这可能是一个很好的答案：

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

请勿使用<meta name=viewport content='user-scalable=no'>

Answer 14

工作模式

我们在Android上工作。关键是：输入上的 font-size 必须是正确的大小。如果你的页面是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 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

如果将输入的字体大小设置为16px ，缩放将停止。移动浏览器假设任何小于16px的东西意味着用户需要缩放，所以我不能自己动手。

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

您也可以设置以下元标记，但它会阻止用户完全缩放。

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

如果您想要用户缩放但仅禁用输入缩放，请尝试此

$("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

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

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

Answer 18

参加派对的时间已经很晚了，但是在我发布这篇文章之前，我昨天花了一整个下午的时间疯了，并意识到这是Android的一个功能/错误。所以我会发布我的解决方案。这对我有用，并且仍然允许用户缩放：

元：

<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 19

我发布了一个答案，因为我遇到了类似的问题而且我已经解决了。

我的情况如下。

html head中的视口设置是

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

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

我们的情况详情并不相同，但我认为他们的问题基本相同。

我决定添加＆＃34; target-densitydpi = device-dpi＆＃34;到meta [name = viewport]标签。

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

请试试。

但我必须说＆＃34; target-densitydpi = device-dpi＆＃34;会有副作用。

这里的情况不好。

Android OLD浏览器读取＆＃34; target-densitydpi = device-dpi＆＃34;。
转到没有target-densitydpi属性的其他页面。
浏览器开始将页面呈现为＆＃34; target-densitydpi = device-dpi＆＃34;。
因此，它会以错误的比例因子呈现下一页。

这种情况的解决方案是将target-densitydpi属性重写为＆＃34; medium-dpi＆＃34;来自＆＃34; device-dpi＆＃34;在进入下一页之前使用javascript。

使用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>

而且......这段代码会引发新问题有些浏览器在使用后退按钮返回上一页时使用缓存数据呈现javascript进程的结果。因此，他们将前一页显示为＆＃34; target-densitydpi = medium-dpi＆＃34;不是＆＃34; target-densitydpi = device-dpi＆＃34;。

这方面的解决方案与上述相反。

<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 20

保持内容比窗口更窄。

您必须从头开始设计您的页面，但这完全有效。

关键是使用@media css at-rule仅允许组件具有您知道屏幕足够大的宽度。

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

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

或许您的图像宽度为500px，您可能需要将其隐藏在较小的屏幕上：

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

Answer 21

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

通常，您不想禁用辅助功能。

但是您可以通过简单地添加固定的div并将网页放在其中来解决缩放问题。

#app {
  position: fixed;
  top: 0em;
  bottom: 0em;
  left: 0em;
  right: 0em;
  overflow: scroll;
 }

<body>
<div class="app">
  <!-- the rest of your web page  -->
  <input type="text">
</div>
</body>

<body>
     <div class="app">
     </div>
</body>

Answer 23

将此元标记添加到您的html文件中，它将解决此问题。

<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0' ></head><body>html code</body></html>

Answer 24

在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 25

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

重置每个viewport和focus事件的blur对我有用：

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 26

我遇到了同样的问题（仅限Android Chrome浏览器）。我解决了这个问题。

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

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

onFocus文本字段，我设置了以下视口元内容viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';
在文本字段的onBlur上，我正在将视口元内容重置为viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4';您可以根据需要设置最大比例，或者如果您希望它是用户可扩展的，请不要设置最大比例

当您更改输入的onFocus事件时，如果maximum-scale为1，则不会放大。这对我来说就像一个魅力。希望它也适合你。

Answer 27

偶然我发现了这个：

 input {
     line-height:40px;
 }

将阻止使用Chrome for Android版本18放大我的Galaxy Nexus上的输入虽然这可能与我的情况有关：

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

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

Answer 28

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

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

但是，当我双击输入框时，键盘会向上滑动并使页面的高度减小。

Answer 29

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

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

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

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

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

Answer 30

尝试使用此功能，它会适合设备尺寸并避免放大/缩小

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

Answer 31

从我尝试过的最好的方法来看，是使输入的字体在16px以上。绝对适用于chrome的最新版本。

Answer 32

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

class Loan(models.Model):
    lender = models.ForeignKey(User, related_name='lender')
    borrower = models.ForeignKey(User, related_name='borrower')
    money = models.IntegerField()

Answer 33

将此元标记添加到您的html文件中，它将解决问题。

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

在HTC欲望816和SAMSUNG GALAXY S5中添加此行解决了我的问题。

Answer 34

解决方案!!!!!!!!!!!!!!!

至少对于使用Phonegap / Cordova的人

我使用Galaxy Tab pc1010和Android Froyo（2.2）我使用的是Cordova 2.4.0

将这些漂亮的线条添加到HTML头元素中：

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

单独输入并使用最大刻度0.9。我在选择输入字段时遇到了这个问题，我的布局从顶部和左边稍微调整了一点，尝试使用javascript元素样式修改修复它，但它很糟糕。感谢上帝，我在一个旧的移动站点项目中找到了这个配置，该项目是使用一些教程创建的。

Answer 35

这对我很有用。

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

Answer 36

我的建议是看看best practices for android web development。更具体地说，您可能需要在元标记中包含更多内容以防止缩放发生。例如：

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

Answer 37

任何人都想知道你实际上可以通过输入只读来整个输入框缩放（肯定是在iTouch上，因为它是我必须测试的全部）。

$("#your-input").focus(function(event){
event.preventDefault();
$(this).prop({ readOnly: true });
/*
Do your magic

*/
$(this).prop({readOnly:false});
});

我真的很惊讶发现还没有人尝试过这个！

在Android网页中禁用缩放输入焦点

37 个答案:

不可能！

缩放问题导致缩小输入焦点

元标记缩放的神话修复。

主要原因

初始状态1x

缩小以适合0.35x

放大输入焦点1.5x

解决方案1

解决方案2

解决方案3

保持内容比窗口更窄。

在Android网页中禁用缩放输入焦点

37 个答案:

不可能！

缩放问题导致缩小输入焦点

元标记缩放的神话修复。

主要原因

初始状态1x

缩小以适合0.35x

放大输入焦点1.5x

解决方案1 ​​

解决方案2

解决方案3

保持内容比窗口更窄。

解决方案1