Javascript 禁用Android网页中输入焦点的缩放_Javascript_Jquery_Android_Html

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

javascript jquery android html

Javascript 禁用Android网页中输入焦点的缩放,javascript,jquery,android,html,Javascript,Jquery,Android,Html,这里是dilema，我有一个网页（仅适用于android设备），在该网页中我有一个输入框（特别是一个文本框），当它获得焦点时，浏览器会放大。我不想放大-听起来很简单，对吧这里是有趣的地方：我必须能够放大，所以不要说 <meta name='viewport' content='user-scalable=0'> 有什么想法吗？如果将输入的字体大小设置为16px，缩放将停止。移动浏览器假设任何小于16px的东西都意味着用户需要缩放，所以我为什么不自己做呢 input[type='

这里是dilema，我有一个网页（仅适用于android设备），在该网页中我有一个输入框（特别是一个文本框），当它获得焦点时，浏览器会放大。我不想放大-听起来很简单，对吧

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

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

有什么想法吗？

如果将输入的字体大小设置为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" />');
}

$（“输入[type=text]，textarea”）.mouseover（可缩放）。mousedown（可缩放）；
函数zoomDisable（）{
$（'head meta[name=viewport]'）。删除（）；
$（'head'）。前置（''）；
}
函数zoomEnable（）{
$（'head meta[name=viewport]'）。删除（）；
$（'head'）。前置（''）；
}

同时尝试此操作

不可能！

$("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" />');
}

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

我也已经完成了那个项目和雇主的工作

我不敢说，但确切地说我所要求的是不可能的。对不起人们。但是我将保留这个问题，以便人们可以看到其他选项。

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

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

但这会将视口移动到0，0（页面的左上角）。所以我

$（）。再次向左滚动（…）

和

.scrollTop（…）

表单
（initial scale=1.0，maximum scale=0.05
是我的viewport
meta的初始值。）
（我这样做的原因不是为了阻止Android进行缩放，而是为了将缩放重置为已知的比例，因为其他Android错误会破坏screen.width
和其他相关值。）
试试这个，它可以在我的设备上工作：
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" /> 



但是，当我双击输入框时，键盘会向上滑动，使页面的高度降低。
以下内容对我很有用（Android Galaxy S2）：

这在#inputbox
是输入表单元素的id的情况下工作
我用它来阻止一个搜索框在IOS中自动缩放，这是上面文章的一个修改，因为鼠标悬停事件只会在第一次工作，但无法触发后续时间。享受这一切吧，这真是一个拔头发的人
$("#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" />');
}

$（“#inputbox”）.live（'touchstart'，函数（e）{
$（'head meta[name=viewport]'）。删除（）；
$（'head'）。前置（''）；
}
);
$（“#输入框”）.mousedown（可缩放）；
函数zoomEnable（）{
$（'head meta[name=viewport]'）。删除（）；
$（'head'）。前置（''）；
}
我一直在考虑这个问题，因为我的HTML5 Android应用程序一直让我很恼火。我可以提供半个答案。也就是说，当文本字段聚焦时，如何停止页面缩放
需要Jquery Mobile：
$('#textfield').textinput({preventFocusZoom:true});

确实如此
但是，正如我所说，这只解决了问题的一半。另一半是允许用户在之后再次缩放页面。我找到的文件似乎表明
    $('#textfield').textinput({preventFocusZoom:false});

或
应该取消设置，但我还没有设法让这两个选项都起作用。如果以后要将用户带到另一个页面，这不是问题，但是如果像我一样，您只是要通过AJAX加载内容，则使用有限
编辑：虽然针对IOS
$.mobile.zoom.disable();

也会停止缩放。以更合适的通用方式。但不幸的是
$.mobile.zoom.enable();

无法像以前的代码一样恢复功能。
我偶然发现：
 input {
     line-height:40px;
 }   

在我的Galaxy Nexus上使用Android版本18的Chrome将阻止放大输入
虽然这可能是我的情况所特有的：
<meta name='viewport' data='width=800'>



因此，作为将来的参考，如果您通过谷歌来到这里，这可能是其他解决方案之一。
是的，这是可能的
input[type='text'],input[type='number'],textarea {font-size:16px;}

在Android 4.2浏览器和Android Chrome上测试

我发现它一直在缩放的唯一案例是在Chrome中，设置->可访问性->文本缩放比例高于100%。
我也有同样的问题（仅在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"]');


在文本字段的焦点上，我设置了以下视口元内容viewportmeta.content='width=devicewidth，initial scale=1，minimum scale=1，maximum scale=1'

在文本字段模糊时，我将视口元内容重置为viewportmeta.content='width=device width，initial scale=1，minimum scale=1，maximum scale=1.4'如果您愿意，可以设置最大比例，或者如果您希望它具有用户可伸缩性，请不要设置最大比例

当您更改触发输入的onFocus
事件时，如果最大刻度
为1，则不会放大。
这对我来说很有魅力。希望它对你也有用
 我不确定这是否是最好的方法，但这对我在安卓和iphone上都有效
input:focus { font-size: 16px!important}

您可以使用媒体查询仅针对移动设备。
工作模式
我们在安卓系统上进行了这项工作。关键是：输入的字体大小必须正确。若你们的页面是320px宽，那个么你们需要16px的字体大小。如果你的字体大小是640px，那么你需要32px的字体大小
此外，您还需要以下内容
320宽版
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, minimum-scale=1" />

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



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

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



注意：这不包含用户可伸缩属性。那将打破它
font-size: 18px;

这为运行安卓4.3的Nexus7（2011）修复了这个问题
这个问题只存在于f
<meta name="viewport" content="width=640, initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />

font-size: 18px;

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");
    });
});

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

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

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

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

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

* { font-size:16px; }

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

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;
}

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

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

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

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

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

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

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

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

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