適合移動設備的網頁設計：如何在文本輸入后以編程方式縮小？

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").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的大小錯誤，谷歌地圖畫布變得邪惡）。

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

});