全屏和非全屏時，如何在html頁面上獲得相同的坐標？

Question

我有一個html頁面，我在其中將圖像放置在相對於它們所在的窗口的特定x和y坐標上，但是當我單擊全屏按鈕以使該頁面變為全屏顯示時，圖像則與我的坐標略有偏離希望他們成為。 有沒有辦法在切換全屏時獲得相同的坐標？

                    function toggleFullScreen() {
                    var doc = window.document;
                    var docEl = doc.documentElement;
                    var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
                    var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

                    if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
                        requestFullScreen.call(docEl);
                        var load = document.getElementById('<%=alreadyLoaded.ClientID%>');
                        load.value = 2;
                    }
                    else {
                        cancelFullScreen.call(doc);
                        var load = document.getElementById('<%=alreadyLoaded.ClientID%>');
                        load.value = 2;
                    }
                }

Answer 1

這樣，您將可以調用toggleFullScreen（）;。 每次屏幕更改大小時，我都尚未測試代碼，您可以對其進行測試並提供一些反饋

 window.addEventListener('resize', function(event) {
      toggleFullScreen();
     });