javascript – Canvas无法在移动设备上显示

HTML5画布(仅使用drawImage函数)没有出现在移动设备上,而是出现在我的笔记本电脑上.

你可以在这里看到：mmhudson.com/index.html(重装一次)

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

编辑：

仅当文档中包含以下元标记时,才会出现此问题：

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

解决方法:

您的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";
            }
        }

省略元视口标记时,浏览器假定页面/窗口宽度为980px,因此代码正常运行.

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