适合移动设备的网页设计：如何在文本输入后以编程方式缩小？ [英] Mobile-friendly web design: How to programmatically zoom out after text input?

问题描述

我在桌面和移动浏览器IMO中都有一个外观和功能正常的网页，但我无法解决特定的UX功能。

I've got a webpage that looks and functions okay in both desktop and mobile browsers IMO, but I've been unable to solve a particular UX functionality.

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

When a user clicks/taps on a text field for searching, the mobile browsers zoom to the text box for data entry.. This is good and I want to keep it! ..but how do I reset the page scale/zoom/transform afterward?

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

I want to zoom out programmatically after the user stops typing.. But nothing I've Googled and/or tried has worked.

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

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

All I seem to find are solutions for disabling user-scaling via the viewport meta tag, which is not what I want, or questions similar to this one that remain unanswered.

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

Here's some stuff I've tried:

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

1) Simulating a double-tap via the YUI, I had high-hopes for this..

<!-- 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）这不起作用..

2) This didn't work..

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

3）使用JQuery以1为标度缩放到窗口或正文也失败..

3) Using JQuery to zoom to "window" or "body" at a scale of 1 also failed..

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

4）当我考虑使用CSS来做 transform2d 在我最外面的DIV上，但令我懊恼的是，它不起作用..

4) Then I got excited when I considered using CSS to do a transform2d on my outer-most DIV, but to my chagrin, it didn't work..

$('#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>

5) Finally, I've tried declaring a viewport meta tag and manipulating it in the runtime, but this isn't working on several levels; either I get no apparent change in state, or if I do get a change, the scaling is "just wrong" in several respects (some text will be missing, divs are sized wrong, the Google Map canvas gets wicked-jacked).

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

无论如何，我希望我所要求的是一些基本上，我如何以编程方式重新创建当我双击页面上的大多数元素时发生的缩小？

Anyway, I hope what I'm asking is somewhat clear. Basically, how can I programmatically recreate the zooming out that occurs when I double-tap most any element on the page?

提前感谢您的帮助。

推荐答案

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

I think the js meta viewport one is the most promising: You could set the viewport meta tag after loosing focus on the input, just like you did in one exapmle - together with a window.resize() call is js, which is missing in the example - this should trigger a zoom out. I cant try it right now myself, so no guaranty that there will be no messups like you discribed, but maybe worth a try ;)

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

});  

这篇关于适合移动设备的网页设计：如何在文本输入后以编程方式缩小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！