Mobile-friendly web design: How to programmatically zoom out after text input?

问题

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?

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

Of note: If you double-tap most-any element, the browser will reset the scale/zoom, but I'm clearly using the wrong keywords or asking the wrong questions to identify this behavior..

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) 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) This didn't work..

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

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

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

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) 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?

Thanks in advance for any help.

回答1:

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

});

来源：https://stackoverflow.com/questions/20057256/mobile-friendly-web-design-how-to-programmatically-zoom-out-after-text-input

标签

javascript

jquery

mobile

viewport