由於現在已禁用視口更改，如何使用 javascript 強制視口“取消縮放”？

Question

我實施了一個方案，允許我網站上的訪問者點擊小照片以查看更大的視圖。 點擊/點擊會導致一個新的頁面元素出現並擴展到屏幕可用的最大尺寸，在那里顯示更高分辨率的圖像。 原因是避免加載高帶寬圖像，除非訪問者感興趣。 一旦顯示了更好的高分辨率圖像，訪問者可以使用手指捏合手勢進一步擴展圖像，這是手機的典型特征。 問題是，如果訪問者確實手動放大了照片，則在關閉較大​​的圖像后，他們將看到一個令人討厭的超大頁面。 而且無論我做什么，訪問者對圖像的手動調整都會影響整個頁面。

很長一段時間以來，對此都有一個合理的解決方案，我多年前在堆棧交換的某個地方找到了它。 我會設置一個這樣的功能......

function resetScreenSize() {
    var viewport = document.querySelector('meta[name="viewport"]');
    if(viewport===null){
        // just for test alert("no viewport meta");
        return;
        }

    var original = viewport.getAttribute('content');
    var forceScale = original+",maximum-scale=1.0";
    viewport.setAttribute('content', forceScale); 
    setTimeout(function() {
        viewport.setAttribute("content", original);
        }, 100);
    
    }

這個想法是通過向視口添加“最大比例”值 1 來取消訪問者所做的任何手動縮放，等待系統穩定，然后將視口返回到其原始設置（沒有最大比例） ）。 在用一個簡單的按鈕測試了這種方法之后，我只是設置了我的代碼以在訪問者關閉縮放圖像時自動調用該函數。

好吧，Apple 似乎以其無限的智慧決定 IOS 設備將不再支持視口“最大比例”以及其他幾個選項，例如禁止用戶縮放。 它似乎在其他瀏覽器上也被阻止，例如 IOS 上的 Chrome。 因此，我的計划不再有效。 如果訪問者選擇全尺寸圖像，然后將其進一步擴展，我無法將視口設置回正常狀態，而無需執行諸如重新加載頁面之類的劇烈操作。

我已經嘗試了在 stackexchange 上發現的其他一些方法，大多數涉及嘗試阻止縮放開始。 那不是我想要的。

那么我可以考慮另一種解決方案嗎？ 我知道像 Facebook 這樣的社交媒體巨頭有一種方法可以讓訪問者單擊圖像以顯示更大的視圖，並且無論訪問者如何手動放大它，一旦照片被關閉，事情就會恢復正常。 但我不知道這是怎么做到的。

Answer 1

不久前我遇到了類似的問題，並以類似的方式修復了它。

這里的一個重要技巧是等待 100 毫秒。 使用 0 將立即執行代碼，而不實際應用任何內容。

現在，如果 Apple 更改了這些視口參數的規則（可能是因為它被某些人濫用了），那么我能想到的一種解決方案是使用 IFRAME。 我認為 Facebook 每當打開帶有圖像的“彈出窗口”（以及旁邊的評論）時都會使用該技術。 這使得關閉該窗口並返回到之前的視圖變得非常容易。 此外，視口縮放因子將在 IFRAME 中更改，而不是在后面的窗口中更改。 所以你應該得到什么是必要的。