适合移动设备的网页设计：如何在文本输入后以编程方式缩小？
我在桌面和移动浏览器IMO中都有一个看起来和function正常的网页，但我一直无法解决特定的UXfunction。
当用户点击/点击文本字段进行搜索时，移动浏览器会缩放到文本框以进行数据输入。 这很好，我想保留它！ ..但是如何重置页面比例/缩放/变换？
我希望在用户停止输入后以编程方式缩小..但我没有用谷歌搜索和/或尝试过任何工作。
值得注意的是：如果你双击大多数元素，浏览器将重置缩放/缩放，但我显然使用了错误的关键字或者提出错误的问题来识别这种行为。
我似乎找到的解决方案是通过视口元标记禁用用户缩放，这不是我想要的，或类似于这个仍然没有答案的问题。
这是我尝试过的一些东西：
1）通过YUI模拟双击，我对此寄予厚望。
// 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的大小错误，谷歌地图canvas变得邪恶）。
// Replace..reset the viewport metatag via JQuery.. // var theWidth = $(window).width(); $('#vp').remove(); $('head').append(''); // Or this pure javascript approach.. // var vp = document.getElementById('vp'); vp.setAttribute('content','width='+theWidth.toString());
无论如何，我希望我所要求的有点清楚。 基本上，我如何以编程方式重新创建当我双击页面上的大多数元素时发生的缩小？
在此先感谢您的帮助。
我认为js meta视口一个是最有希望的：你可以在忽略对输入的焦点之后设置视口元标记，就像你在一个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(); });