javascript - Canvas 不显示在移动设备上

Question

HTML5 Canvas (仅使用 drawImage 函数)未显示在移动设备上，但显示在我的笔记本电脑上。

你可以在这里看到:mmhudson.com/index.html (重新加载一次)

我没有收到任何错误或任何错误，但它不会在 iOS 上的 chrome 或 android 上的默认浏览器中显示..

编辑:

只有在文档中包含以下元标记时才会出现此问题:

<meta name="viewport" content="width=device-width, initial-scale=1"></meta>

Answer 1

您的 init() 函数由 imgLoad() 调用，但您仅在窗口宽度大于或等于 480px 时加载图像:

        window.onload = function(){
            s.dL = true;
            s.width = window.innerWidth;
            s.height = window.innerHeight;


            if(s.width < 320){
                //too small
            }
            else if(s.width >= 320 && s.width < 480){
                s.scWidth = 296;

            }
            else{
                s.scWidth = 456;
                b_border.src = "res/480/b_border.png";
                r_border.src = "res/480/r_border.png";
                l_border.src = "res/480/l_border.png";
                t_border.src = "res/480/t_border.png";
                br_corner.src = "res/480/br_corner.png";
                tr_corner.src = "res/480/tr_corner.png";
                bl_corner.src = "res/480/bl_corner.png";
                tl_corner.src = "res/480/tl_corner.png";
                h_wall.src = "res/480/h_wall.png";
                v_wall.src = "res/480/v_wall.png";
                box.src = "res/480/box.png";
                crosshair.src = "res/480/crosshair.png";
                player1.src = "res/480/player1.png";
                player2.src = "res/480/player2.png";
            }
        }

当您省略元视口(viewport)标记时，浏览器假定页面/窗口宽度为 980 像素，因此您的代码可以正常运行。

当您使用 width=device-width 包含元视口(viewport)标签时，浏览器会将页面/窗口宽度设置为屏幕宽度(例如 iPhone 上的 320px)，因此 imgLoad() 和 init() 永远不会被调用。