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

Question

I am trying to set up a Canvas element which fills the window (specifically a container div which fills the body).我正在尝试设置一个填充 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. 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%");
}

The HTML code is: HTML 代码为：

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

And the style is:风格是：

#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%;
}

Am I missing something Safari-specific here in how I am working with the resize event?在我如何处理调整大小事件时，我是否遗漏了一些 Safari 特定的东西？

Answer 1

I was able to resolve the issue, in fact it had nothing to do with my code, which made it rather hard to debug.我能够解决这个问题，实际上它与我的代码无关，这使得调试变得相当困难。 I will explain my methodology and the solution in case anyone else encounters this issue.如果其他人遇到此问题，我将解释我的方法和解决方案。

As I added more and more debugging code to try and figure out what was going wrong I began to suspect that the browser was not running my Javascript (which is in a separate .js file on the server).随着我添加越来越多的调试代码来尝试找出问题所在，我开始怀疑浏览器没有运行我的 Javascript（它位于服务器上的单独.js文件中）。 Eventually I pulled the raw access logs for the server and discovered that while there was a 200 OK log entry for the main page, there was no log entry for the Javascript file.最终，我提取了服务器的原始访问日志，发现虽然主页上有200 OK日志条目，但 Javascript 文件没有日志条目。

This behavior was a bit unexpected as standard behavior would be a HTTP GET request with an If-Modified-Since header that would allow the browser to skip downloading the content if the server identifies that the page has not been modified.这种行为有点出乎意料，因为标准行为是带有If-Modified-Since header 的HTTP GET请求，如果服务器识别出页面未被修改，则允许浏览器跳过下载内容。 This would then be recorded as a 304 NOT MODIFIED result in the server's access log.然后，这将在服务器的访问日志中记录为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 request to the main page. 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请求到主页。

At this point it seemed that Safari had some sort of weird caching mechanism going on which didn't even bother to request the assets.在这一点上，Safari 似乎有某种奇怪的缓存机制在运行，甚至都懒得去请求资产。 This didn't seem very plausible however, so I continued to investigate until I noticed that the iPhone was requesting the main page on HTTP and not HTTPS (as the desktop version was).然而，这似乎不太合理，所以我继续调查，直到我注意到 iPhone 请求的是 HTTP 而不是 HTTPS 的主页（与桌面版本一样）。 I had simply not typed the https:// in the Safari.我根本没有在 Safari 中输入https:// 。

Switching Safari to HTTPS resulted in the Javascript being pulled correctly and run.将 Safari 切换到 HTTPS 导致 Javascript 被正确拉出并运行。 Perhaps this is a consequence of some security policy in Safari.也许这是 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