如果删除不相关的脚本，使用html画布生成的Iphone图像将被裁剪

Iphone image generated using html canvas appears cropped if unrelated scripts removed

本文关键字：Iphone 布生成 图像 裁剪 html 不相关 删除 脚本 使用 如果      更新时间：2023-09-26

我正在尝试查看iphone上使用html5画布生成的图像。

浏览器页面检测到iphone，然后重定向到iphone特定的页面。图片显示正常

现在这里是问题。iphone页面是浏览器页面的精简版。当我把它剥离回来时，我发现当我从页面上删除2个完全不相关的脚本时，图像在iphone上出现了裁剪(图像的底部出现了裁剪)。只是为了确定。我用其他脚本替换了这些脚本。不管所涉及的脚本是什么，当有2个脚本时，图像将正确显示。

我还发现，如果没有脚本的iphone页面直接加载(而不是重定向)的图像显示正确。只有当从浏览器页面重定向到iphone页面而不使用脚本时，才不起作用。重新加载iphone页面也能正确显示图像

顺便说一下，我注意到当我把手机的方向改为横向和反向时，也会有类似的裁剪效果，但我不确定这是否有关系。

我猜裁剪与画布生成时有关，但我不确定。这把我难住了。

无论如何，这是iphone页面的代码。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
      <title>canvas image thingy majig</title>
            <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
            <link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
            <link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link type="text/css" href="/iphone.css" rel="stylesheet" />
<link type="text/css" href="/style.css" rel="stylesheet" />
      <script type="text/javascript" src="/MOB.js"> </script>
</head>
<body onload="init();">
      <section id="drawingArea">
            <canvas id="canvas"> </canvas>      
      </section>      
                            <input class="reset" type="button" value="Clear" onClick="window.location.reload()">

                                    <script type="text/javascript" src="/cmmn/sclbkmk.js"></script>
                                    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script> 
</body>
</html>

有谁知道是哪里出了问题吗?

编辑:仅供参考，我使用的是带有固件版本4.1(8B117)的iphone 4。

似乎是时间的问题。

我修改了上面的代码，使 
<body onload="init();">
现在

<body onload=setTimeout("init()",100);>

我还没有检查settimeout的最佳时间，但到目前为止，100秒是可行的。

这也否定了剥离网站的意义(我试图优化加载时间)

相关文章：