I have an online coloring game site. I want that if the user opens the game on a non-touch screen device, the canvas will be 960px x 630px, and if the user plays on a touch screen device, the canvas will be 630px x 960px. I have this code, but it doesn't work: var isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0; function resizeCanvas() { var stageWidth, stageHeight; if (isTouchDevice) { // If it's a touch device if (window.innerWidth < window.innerHeight) { // Portrait mode: adjust to 530x960 stageWidth = 530; stageHeight = 960; } else { // Landscape mode: set to 960x630 stageWidth = 960; stageHeight = 630; } } else { // Desktop: keep 960x630 stageWidth = 960; stageHeight = 630; } // Resize canvas manually var canvas = document.getElementById("canvas"); // Make sure the canvas ID is "canvas" canvas.style.width = stageWidth + "px"; canvas.style.height = stageHeight + "px"; // Resize stage content stage.scaleX = stageWidth / lib.properties.width; stage.scaleY = stageHeight / lib.properties.height; // Make sure stage updates stage.tickOnUpdate = false; // Stop auto-update stage.update(); // Update the stage stage.tickOnUpdate = true; // Re-enable auto-update } // Listen for window orientation or size change window.addEventListener('resize', resizeCanvas); window.addEventListener('orientationchange', resizeCanvas); resizeCanvas(); // Call when page loads Can anyone help me?