在特定页面上隐藏div，jquery在移动设备上无法正常运行

Question

我希望我的画布（来自paper.js的链）隐藏，但仅限于特定页面，以便在必要时允许移动设备上的触摸滚动。因为媒体查询不是解决方案，所以我使用了仅与我的页面链接的jquery脚本来隐藏我的.canvas div：

if ($(window).width() < 640) {
$('.canvas').hide();
} else {
$('.canvas').show();
}

它完美地工作＆＃34;完美＆＃34;调整大小并在firefox，safari和chrome中重新加载窗口时......但是在移动设备上画布不是隐藏的。有什么想法吗？

顺便说一下，我使用Stacey lightweight CMS并确保我的脚本：

<script type="text/javascript" charset="utf-8">
  document.getElementsByTagName('body')[0].className += ' js-enabled';
</script>

在我的HTML文档中。我甚至不知道它是否有用，但我试过......

Answer 1

您应该考虑使用所有浏览器和几乎所有移动浏览器都支持的媒体查询，这是一个示例：

@media only screen and (max-device-width: 640) {
    .canvas { display: none; }
}

将此添加到您的CSS中，它应该修复它。

Answer 2

某些移动浏览器不支持javascript，如果是这种情况，您最好使用标记只是为了提醒移动用户他们无法查看更改，因为他们的浏览器不支持的JavaScript