我想这一点,但它不工作:
<html>
<head>
<script src="js/menu-collapser.js" type="text/javascript" media="media screen and (max-width: 599px)"></script>
</head>
...
</html>
//menu-collapser.js:
jQuery(document).ready(function($){
$('.main-navigation li ul').hide();
$('.main-navigation li').has('ul').click(function() {
$(this).children().toggle();
});
});
你对如何做到这一点的方法不对的想法? 如果直接与标签头中使用的脚本工作。
你不能这样做,直接使用Javascript <script>
标记。 媒体查询在链接CSS文件或内嵌CSS样式使用。 一个基本的例子:
<link rel="stylesheet" media="screen and (min-width: 900px)" href="desktop.css"/>
<link rel="stylesheet" media="screen and (min-width: 571px)" href="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 570px)" href="mobile.css"/>
或直接在您的样式表:
@media screen and (max-width: 599px) {
#mobile {
display: block;
}
}
但是,您可以使用外部资产装载机/媒体查询库做到这一点( require.js , modernizr.js , enquire.js等),在这种情况下,我设置使用一个例子enquire.js ,因为我认为这是非常有效的,默认情况下并不需要jQuery的:
完整的示例
1)包含enquire.js(可在这里 ):
<script type="text/javascript" src="/js/enquire.js"></script>
2)创建一个负载功能-加载JS文件:
<script type="text/javascript">
// This loads JS files in the head element
function loadJS(url)
{
// adding the script tag to the head
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// fire the loading
head.appendChild(script);
}
</script>
3)消防enquire.js和监听媒体查询的变化(包括上载和调整大小):
<script type="text/javascript">
enquire.register("screen and (max-width: 599px)", {
match : function() {
// Load a mobile JS file
loadJS('mobile.js');
}
}).listen();
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
// Load a tablet JS file
loadJS('tablet.js');
//console.log('tablet loaded');
}
}).listen();
enquire.register("screen and (min-width: 900px)", {
match : function() {
// Load a desktop JS file
loadJS('desktop.js');
//console.log('desktop loaded');
}
}).listen();
</script>
全部放在一起
使用一个简单的HTML页面从外部文件加载enquire.js:
<html>
<head>
<script type="text/javascript" src="/enquire.js"></script>
<script type="text/javascript">
// This loads JS files in the head element
function loadJS(url)
{
// adding the script tag to the head
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// fire the loading
head.appendChild(script);
}
</script>
<style>
body {
font-family: arial;
}
h1 {
font-size: 50pt;
}
#mobile {
display: none;
}
#tablet {
display: none;
}
#desktop {
display: none;
}
@media screen and (max-width: 599px) {
#mobile {
display: block;
}
}
@media screen and (min-width: 600px) and (max-width: 899px) {
#tablet {
display: block;
}
}
@media screen and (min-width: 900px) {
#desktop {
display: block;
}
}
</style>
</head>
<body>
<div id="desktop">
<h1>Desktop</h1>
</div>
<div id="tablet">
<h1>Tablet</h1>
</div>
<div id="mobile">
<h1>Mobile</h1>
</div>
<script type="text/javascript">
enquire.register("screen and (max-width: 599px)", {
match : function() {
// Load a JS file
loadJS('mobile.js');
}
}).listen();
enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
match : function() {
loadJS('tablet.js');
//console.log('tablet loaded');
}
}).listen();
enquire.register("screen and (min-width: 900px)", {
match : function() {
loadJS('desktop.js');
//console.log('desktop loaded');
}
}).listen();
</script>
</body>
</html>
除了加载JS文件,你可以创建一个CSS加载程序过多,这会以同样的方式(有条件)工作,但失去了使用的对象@media
CSS中。 这是值得一读的用法解释为enquire.js ,因为它可以做多了很多,比我在这里说明。
警告:上面没有使用jQuery的,但你可以利用一些它提供的功能; 加载例如脚本 - 或执行,你需要其他的功能。
为什么不直接在脚本加载条件?
(function() {
if( window.innerWidth > 600 ) {
var theScript = document.createElement('script');
theScript.type = 'text/javascript';
theScript.src = 'js/menu-collapser.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(theScript, s);
}
})();
或者更好的是,只执行如果window.innerWidth> 600的代码? 总之,有很多可以使用的解决方案。
media
是不是一个有效的属性<script>
检查它在这里 。
所以,你应该通过手动比检测介质类型动态加载脚本。
有一个插件,在javascript CSS媒体检测 ,你可以使用它。
<script type="text/javascript" src="js/mediatypechecker.js"></script>
$(function() {
if(IsMediaType('screen') > 0 && parseInt(screen.width) < 599) {
$.getSscript("js/menu-collapser.js");
}
});