我试图设置一个填充窗口的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（它在一个单独的程序中）。.js 文件）。) 最后我调出服务器的原始访问日志，发现虽然有一个 200 OK 主页面的日志条目，而Javascript文件没有日志条目。
这种行为有点出乎意料，因为标准的行为应该是一个 HTTP GET 请求 If-Modified-Since 头部，如果服务器识别出该页面未被修改，则允许浏览器跳过下载内容。这将被记录为 304 NOT MODIFIED 结果在服务器的访问日志中。
将iPhone会话的访问日志与桌面上的普通Firefox会话的访问日志进行比较，结果显示Firefox浏览器请求所有的页面资产，并得到了 304 结果和 200 分别记录在访问日志中，而 iPhone 会话只有一个对主页面的请求。
在这一点上，似乎Safari有某种奇怪的缓存机制，它甚至没有去请求资产。然而，这似乎不太合理，所以我继续调查，直到我注意到 iPhone 是通过 HTTP 而不是 HTTPS（桌面版）请求主页面。我根本没有输入 https:// 的Safari中。
将Safari切换到HTTPS后，Javascript被正确拉取并运行。也许这是Safari中某些安全策略的结果。