我有一个在桌面和移动浏览器IMO中看起来和功能都不错的网页,但我一直无法解决特定的UX功能.

当用户点击/点击文本字段进行搜索时,移动浏览器会缩放到文本框以进行数据输入.这很好,我想保留它！ ..但是如何重置页面缩放/缩放/变换？

我希望在用户停止输入后以编程方式缩小..但我没有用Google搜索和/或尝试过任何工作.

值得注意的是：如果你双击大多数元素,浏览器将重置缩放/缩放,但我显然使用错误的关键字或提出错误的问题来识别这种行为.

我似乎找到的解决方案是通过视口元标记禁用用户缩放,这不是我想要的,或类似于这个仍然没有答案的问题.

这是我尝试过的一些东西：

1)通过YUI模拟双击,我对此寄予厚望.

<!-- required in the head node -->
<script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>

// Then elsewhere in script, simulate a double-tap on the DIV containing the input.
YUI().use('node-event-simulate', function(Y)
{
    var node = Y.one("#left");
    node.simulateGesture("doubletap", {point: [4, 4]});
});

2)这不起作用..

window.parent.document.body.style.zoom = 1.0;

3)使用JQuery以1的比例缩放到“窗口”或“正文”也失败了..

$("window").animate({ 'zoom': 1}, 400);

4)然后当我考虑使用CSS在我最外面的DIV上做transform2d时,我很兴奋,但令我懊恼的是,它没有用.

$('#outer-div').css("transform", "scale(1,1)");
$('#outer-div').css("-ms-transform", "scale(1,1)");
$('#outer-div').css("-webkit-transform", "scale(1,1)");

5)最后,我尝试声明一个视口元标记并在运行时操作它,但这不能在几个级别上工作;或者我没有明显的状态变化,或者如果我确实得到了改变,缩放在几个方面“只是错误”(一些文本将丢失,div的大小错误,谷歌地图画布变得邪恶).

// Replace..reset the viewport metatag via JQuery..
//
var theWidth = $(window).width();
$('#vp').remove();
$('head').append('<meta id="vp" name="viewport" content="width='+ theWidth.toString() + '/>');

// Or this pure javascript approach..
//
var vp = document.getElementById('vp');
vp.setAttribute('content','width='+theWidth.toString());

无论如何,我希望我所要求的有点清楚.基本上,我如何以编程方式重新创建当我双击页面上的大多数元素时发生的缩小？

在此先感谢您的帮助.

解决方法:

我认为js meta viewport是最有希望的：你可以在输入失去焦点之后设置视口元标记,就像你在一个exapmle中一样 – 与window.resize()一起调用js,这是缺少的示例 – 这应该触发缩小.我现在无法自己尝试,所以不能保证没有像你所描述的那样的混乱,但也许值得一试;)

$('input[type="textarea"]').on('focusout', function(event) {

    $('meta[name="viewport"]').attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
    $(window).resize();

});