加载并考虑使用CSS媒体查询卸载的JavaScript

我使用CSS媒体查询让我的网站响应：加载并考虑使用CSS媒体查询卸载的JavaScript

@media (min-width:1200px) { 
    // DESKTOP STYLING 
} 

@media (max-width:1200px) { 
    // MOBILE STYLING 
}

我用https://github.com/paulirish/matchMedia.js检查媒体查询

if(min-width:1200px) { 
    // DESKTOP JAVASCRIPT 
} else { 
    // MOBILE JAVASCRIPT 
}

所以最初一切工作正常，当我的屏幕是< 1200px它显示移动版本，如果它更高，它显示桌面版本（JavaScript的作品以及）。

现在的问题是，当我开始调整，例如窗口：

1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE) 
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE) 
    LOADS MOBILE JAVASCRIPT (SITE BREAKS) 
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE) 
    LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)

所以我想知道的任何想法如何“卸载”的JavaScript，或者一个优雅的方式有两个不同的JavaScript文件读取取决于哪些媒体查询被使用？

来源

2012-03-30 jay7

也许尝试使用jQuery Mobile。 http://jquerymobile.com/ ...另外从技术上讲，您不需要使用JavaScript来使网站响应。它可以用CSS和流体布局来完成。您能否详细阐述一下JavaScript如何发挥作用？ – 2012-03-30 19:42:58

那么，我不使用JavaScript来使网站响应。我只是通过CSS（媒体查询，我已经设计了两个单独的模板）来做到这一点。但由于移动版和桌面版使用相同的DOM元素，因此JavaScript仍会尝试运行幻灯片演示。这是导致移动版本中大多数交互式元素被简化的一个问题。因此，而不是幻灯片，你只是有静态图像。 – jay7 2012-03-30 22:59:49

好的，我明白了。对不起，我误解了你的全部情况。 – 2012-03-31 20:31:16

首先，你可以有一个JavaScript的（加入2一起），并有一个控制器，如果你的窗口尺寸大于或不将验证比1200

或者你可以尝试将javascipt的文件包装成两个对象，并创建第三个将作为控制器处理。通过Ajax，您可以加载和卸载文件（因为您的控制器仍然在那里，所以没有任何中断）并在它们之间切换。这是一个问题，因为当你制作这个开关时，你将不得不删除所有的监听器，并且你将不得不加载另一个文件，这将花费很少的时间。

希望这会有所帮助。顺便说一句好的问题。

来源

2012-03-30 20:04:01 helly0d

感谢您的回复，helly0d。呃有点希望有一个更简单的方法来做到这一点。但我想这是唯一的方法。如果javascript文件非常小，那么不会有问题，我还必须解除所有处理程序的绑定。看起来像一个简单的开关非常多的额外的代码:) – jay7 2012-03-30 23:02:11

为什么你需要两种不同尺寸的脚本？你不能使脚本的功能尽可能通用并设置它们的参数吗？或者你是否通过这两个脚本加载不同的HTML控件？ – helly0d 2012-03-30 23:57:33

我会推荐一个类似Enquire.js的图书馆，你可以随时自己编写触发器，但如果你有“桌面幻灯片”和“移动幻灯片”，你需要确保你销毁不活动的调整大小和查询有一个很好的API，包括一个不匹配的触发器。

我正在处理我的“桌面幻灯片”和“移动幻灯片”的相同幻灯片插件，但想要不同的设置（例如 - 使用底部对齐的寻呼机与下一个/上一页导航），这很容易设置页面加载，但如果设备更改方向更改等媒体查询断点怎么办？

来源

2013-05-02 17:44:53

加载并考虑使用CSS媒体查询卸载的JavaScript

回答

相关问题