HTML5 Canvas (仅使用 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";
}
}
当您省略元视口(viewport)标记时,浏览器假定页面/窗口宽度为 980 像素,因此您的代码可以正常运行。
当您使用 width=device-width
包含元视口(viewport)标签时,浏览器会将页面/窗口宽度设置为屏幕宽度(例如 iPhone 上的 320px),因此 imgLoad()
和 init()
永远不会被调用。
关于javascript - Canvas 不显示在移动设备上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14595084/