在 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