在 Safari iOS 13 中未觸發 Resize 和 OrientationChange 事件

Question

我正在嘗試設置一個填充 window 的 Canvas 元素（特別是填充主體的容器 div）。 Everything works fine on desktop, but for some reason in Safari on iOS (tested on 13.4.1) neither the window.resize nor the window.orientationchange events fire at all.

$(function(){
    resizeCanvas();
});

$(window).on('resize', function(){
    resizeCanvas();
});

$(window).on('orientationchange', function() {
    resizeCanvas();
});

function resizeCanvas()
{

    var canvas = $('#my_canvas');

    canvas.css("width", "100%");
    canvas.css("height", "100%");
}

HTML 代碼為：

<body>
    <div id="canvas_container">
        <canvas id="my_canvas"></canvas>
    </div>
</body>

風格是：

#canvas_container
{
    padding: 50px 50px 50px 50px;
    height: 100%;
    width: 100%;
}

#my_canvas
{
    border: 3px solid black;
    width: 100%;
    min-height: 400px;
    height: 100%;
}

body, html 
{
    height: 100%;
}

在我如何處理調整大小事件時，我是否遺漏了一些 Safari 特定的東西？

Answer 1

我能夠解決這個問題，實際上它與我的代碼無關，這使得調試變得相當困難。 如果其他人遇到此問題，我將解釋我的方法和解決方案。

隨着我添加越來越多的調試代碼來嘗試找出問題所在，我開始懷疑瀏覽器沒有運行我的 Javascript（它位於服務器上的單獨.js文件中）。 最終，我提取了服務器的原始訪問日志，發現雖然主頁上有200 OK日志條目，但 Javascript 文件沒有日志條目。

這種行為有點出乎意料，因為標准行為是帶有If-Modified-Since header 的HTTP GET請求，如果服務器識別出頁面未被修改，則允許瀏覽器跳過下載內容。 然后，這將在服務器的訪問日志中記錄為304 NOT MODIFIED結果。

Comparing the access log for the iPhone session with that of a regular Firefox session on desktop showed that the Firefox browser was requesting all the page assets and getting 304 results and 200 respectively which was recorded in the access log, while the iPhone session had only a請求到主頁。

在這一點上，Safari 似乎有某種奇怪的緩存機制在運行，甚至都懶得去請求資產。 然而，這似乎不太合理，所以我繼續調查，直到我注意到 iPhone 請求的是 HTTP 而不是 HTTPS 的主頁（與桌面版本一樣）。 我根本沒有在 Safari 中輸入https:// 。

將 Safari 切換到 HTTPS 導致 Javascript 被正確拉出並運行。 也許這是 Safari 中某些安全策略的結果。

在 Safari iOS 13 中未觸發 Resize 和 OrientationChange 事件

問題描述

1 個解決方案

解決方案1
0 2020-05-05 13:06:24

在 Safari iOS 13 中未觸發 Resize 和 OrientationChange 事件

問題描述

1 個解決方案

解決方案1 0 2020-05-05 13:06:24

解決方案1
0 2020-05-05 13:06:24