1

「サイズ変更」イベントおよびiPadでのズームイン/ズームアウト後に特定の機能を実行する必要があります。まず、oun イベントを実行し、リスナーで「サイズ変更」イベントを発生させました。

ZoomHelper = (function () {
    var zoomListeners = [];
    var viewportScale = 1;
    var polling = false;
    function pollZoomFireEvent() {
        var widthNow = window.innerWidth;
        currentViewportScale = (window.screen.width / window.innerWidth).toPrecision(3);
        if (currentViewportScale != viewportScale) {
            viewportScale = currentViewportScale;
            for (var i = 0; i < zoomListeners.length; i++) {
                zoomListeners[i]();
            }
        }
        if (polling)
            setTimeout(arguments.callee, 500);
    }
    function startPollingIfNeeded() {
        if (zoomListeners.length == 1) {
            polling = true;
            pollZoomFireEvent();
        }
    }
    function stopPollingIfNeeded() {
        if (zoomListeners.length < 1) {
            polling = false;
        }
    }
    return {
        addZoomListener: function (func) {
            zoomListeners.push(func);
            startPollingIfNeeded();
        },
        removeZoomListener: function (func) {
            index = zoomListeners.indexOf(func);
            zoomListeners.slice(index, 1);
            stopPollingIfNeeded();
        }
    }
})();

しかし後で、ページに固定配置の要素が少なくとも1つある場合、ズームインまたはズームアウト後に「サイズ変更」イベントが自動的に発生することがわかりました。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script>
    window.onresize = onResize;
    function onResize(e) {
        console.log("resize");
    }
</script>
</head>
<body>
   <div style="position:fixed; border:5px solid red; width:50px; height:50px;">
   </div>
</body>
</html>

それは正常な動作ですか？これらのバリアントのうち、使用するのに適しているのはどれですか? または、ズーム後に「サイズ変更」イベントを発生させるより良い方法はありますか?

4

0 に答える 0