Home/ Questions/Q 9238331
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T07:44:13+00:00

HTML5 canvas (only using the drawImage function) is not showing up on mobile devices,

  • 0

HTML5 canvas (only using the drawImage function) is not showing up on mobile devices, but is on my laptop.

You can see here : mmhudson.com/index.html (reload once)

I get no errors or anything, but it doesn’t display in chrome on iOS or the default browser on android..

EDIT:

This problem only occurs when the following meta tag is included in the document:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your init() function is called by imgLoad(), but you’re loading images only when the window width is greater than or equal to 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";
            }
        }

    When you omit the meta viewport tag, the browser assumes a page / window width of 980px, and so your code runs normally.

    When you include a meta viewport tag with width=device-width, the browser sets the page / window width to the width of the screen (e.g. 320px on iPhone), and so imgLoad() and init() is never called.

    • 0