如何在iPhone網絡應用程序上捏合/縮放后獲得視口比例？

Question

用戶在JavaScript中對頁面進行縮放或雙擊以放大/縮小后，是否有人知道如何獲取視口大小或縮放值？

我嘗試過使用window.innerWidth，但結果好壞參半。 有時它似乎准確地給出了視口顯示的像素數，但是，如果我在頁面上放大並然后進行大幅縮小以縮小，則window.innerWidth將大約為600-700，即使它只是顯示約200px的頁面。 該頁面只有400px寬，並且沒有顯示當您縮小到超出頁面大小時看到的方格“你已經走得太遠”背景。

如果我做小縮放放大和縮小，window.innerWidth似乎工作得很好。 不幸的是我不能依賴用戶只做小捏手勢:)

我也嘗試在手勢事件對象上使用scale屬性，但我發現它不可靠，因為當你重新加載頁面或使用后退/前進按鈕導航到它時，你並不總是知道初始比例使用元標記來指定它。

最終，我正在嘗試創建一個知道用戶何時嘗試縮小超出最大縮放級別的應用程序，所以如果有另一種方法可以做到這一點，我有興趣聽到它:)

這是我用來獲取innerWidth的代碼：

document.body.addEventListener('gestureend', function (evt) {
    console.log(window.innerWidth); // inaccurate when doing large pinch gestures
}, false);

謝謝！

Answer 1

如果您只是嘗試限制最大縮放級別，則可以使用特定於Safari的視口控件標記：

<meta name="viewport" content="maximum-scale=2.0">

有關詳細信息，請參閱Safari移動專用視口元標記規范 。