移动友好型网页设计:如何在输入文本后以编程方式缩小

我有一个网页，在桌面和移动浏览器IMO中看起来和功能都不错，但我无法解决特定的用户体验功能。

当用户点击/点击文本字段进行搜索时，移动浏览器会缩放到用于数据输入的文本框这很好，我想保留它。。但是之后如何重置页面缩放/缩放/转换？

我想在用户停止键入后以编程方式缩小但我在谷歌上搜索和/或尝试过的东西都不起作用。

注意：如果双击大多数元素，浏览器会重置缩放比例，但我显然使用了错误的关键字或问了错误的问题来识别这种行为

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

---

以下是我尝试过的一些东西：

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） 最后，我尝试声明一个viewport元标记并在运行时对其进行操作，但这在几个级别上都不起作用；要么我没有得到明显的状态变化，要么如果我得到了变化，缩放在几个方面都是"错误的"（一些文本会丢失，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());

不管怎样，我希望我所问的是清楚的。基本上，当我双击页面上的大多数元素时，我如何通过编程重新创建缩小？

提前感谢您的帮助。

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