在 Safari iOS 13 中未触发 Resize 和 OrientationChange 事件答案

【问题标题】：Resize and OrientationChange events not firing in Safari iOS 13在 Safari iOS 13 中未触发 Resize 和 OrientationChange 事件
【发布时间】：2020-08-19 07:50:24
【问题描述】：

我正在尝试设置一个填充窗口的 Canvas 元素（特别是填充主体的容器 div）。在桌面上一切正常，但出于某种原因，在 iOS 上的 Safari（在 13.4.1 上测试）中，window.resize 和 window.orientationchange 事件都没有触发。

$(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%;
}

我在处理 resize 事件时是否遗漏了一些 Safari 特有的内容？

【问题讨论】：

标签： javascript css safari html5-canvas mobile-safari

【解决方案1】：

我能够解决这个问题，实际上它与我的代码无关，这使得调试变得相当困难。如果其他人遇到此问题，我将解释我的方法和解决方案。

随着我添加越来越多的调试代码来尝试找出问题所在，我开始怀疑浏览器没有运行我的 Javascript（位于服务器上单独的 .js 文件中）。最终，我提取了服务器的原始访问日志，发现虽然主页上有 200 OK 日志条目，但 Javascript 文件没有日志条目。

这种行为有点出乎意料，因为标准行为是带有If-Modified-Since 标头的HTTP GET 请求，如果服务器识别出页面未被修改，则允许浏览器跳过下载内容。然后，这将在服务器的访问日志中记录为304 NOT MODIFIED 结果。

将 iPhone 会话的访问日志与桌面上的常规 Firefox 会话的访问日志进行比较，发现 Firefox 浏览器正在请求所有页面资产，并分别获得了访问日志中记录的304 结果和200，而 iPhone 会话只有一个对主页的请求。

此时，Safari 似乎有某种奇怪的缓存机制在运行，甚至都懒得去请求资源。然而，这似乎不太合理，所以我继续调查，直到我注意到 iPhone 请求的主页是 HTTP 而不是 HTTPS（就像桌面版本一样）。我只是没有在 Safari 中输入https://。

将 Safari 切换到 HTTPS 导致 Javascript 被正确提取并运行。也许这是 Safari 中某些安全策略的结果。

【讨论】：