jquery - 使用 jquery 在移动设备上无法运行的特定页面上隐藏 div

Question

我想隐藏我的 Canvas (来自 paper.js 的链)，但仅在特定页面上，以便在必要时允许在移动设备上进行触摸滚动。因为媒体查询不是解决方案，所以我使用了一个仅与我的页面链接的 jquery 脚本来隐藏我的 .canvas div:

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

在 firefox、safari 和 chrome 中调整窗口大小和重新加载窗口时，它“完美地”工作……但在移动设备上， Canvas 不是隐藏的。有什么想法吗？

顺便说一句，我使用了 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 中，它应该会修复它。