Question

我在桌面和移动浏览器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”或“body”也失败了..

$("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的大小错误，谷歌地图画布变得邪恶）。 / p>

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

无论如何，我希望我提出的问题有点清楚。基本上，我如何以编程方式重新创建当我双击页面上的大多数元素时发生的缩小？

提前感谢您的帮助。

Answer 1

我认为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();

});

适合移动设备的网页设计：如何在文本输入后以编程方式缩小？

1 个答案: