如果屏幕窄于1024px,则隐藏DIV

我发现(从这个问题 – 隐藏div,如果屏幕小于一定的宽度 )这段编码

$(document).ready(function () { if (screen.width < 1024) { $("#floatdiv").hide(); } else { $("#floatdiv").show(); } }); 

唯一的问题是,我似乎无法让代码工作,我只需要为IE工作的代码,我将使用Media Queries用于其他(较新的)浏览器。 关于我哪里出错的任何提示/提示?

到目前为止,我有

然后在那个div的末尾(哪里关闭)我有

  

在我的标题中,我有

我仍然无法使代码工作(在IE8中测试)我在某处仍然出错?

更新我确实有另一条jQuery链接,这可能导致问题吗? 以下是完整的编码

    

错误信息

网页错误详情

用户代理:Mozilla / 4.0(兼容; MSIE 7.0; Windows NT 5.1; Trident / 4.0; chromeframe / 10.0.648.133; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; InfoPath.2)时间戳:星期六,2011年3月12日11:31:32 UTC

消息:预期标识符,字符串或数字行:140字符:1代码:0 URI:www.itsdaniel0.com/2011/03/unicorns-are-cool/

消息:对象不支持此属性或方法行:16字符:1代码:0 URI:dl.dropbox.com/u/17087195/website/sidebar_size.js

消息:’twttr.anywhere._instances’为null或不是对象行:1个字符:5207代码:0 URI:platform.twitter.com/anywhere.js?id = 6vIPELyEeU5vcSc3c0Q5w&v = 1

消息:’twttr.anywhere._instances’为null或不是对象行:1个字符:5207代码:0 URI:platform.twitter.com/anywhere.js?id = 6vIPELyEeU5vcSc3c0Q5w&v = 1

由于“低代表”错误,从url中删除了http

使用JQUERY的旧答案:

 //the function to hide the div function hideDiv(){ if ($(window).width() < 1024) { $("#floatdiv").fadeOut("slow"); }else{ $("#floatdiv").fadeIn("slow"); } } //run on document load and on window resize $(document).ready(function () { //on load hideDiv(); //on resize $(window).resize(function(){ hideDiv(); }); }); 

编辑:请注意,现在有更多的跨浏览器支持css3媒体查询,使用这些而不是JavaScript更有效。

使用CSS。

 /* always assume on smaller screen first */ #floatdiv { display:none; } /* if screen size gets wider than 1024 */ @media screen and (min-width:1024px){ #floatdiv { display:block; } } 

请注意,在大多数现代浏览器中,您还可以使用window.matchMedia在javascript中运行媒体查询

 if(window.matchMedia("(min-width:1024px)").matches){ console.log("window is greater than 1024px wide"); } 

你需要设置屏幕元素:

 var screen = $(window) 

例如:

 $(document).ready(function () { var screen = $(window) if (screen.width < 1024) { $("#floatdiv").hide(); } else { $("#floatdiv").show(); } }); 

媒体查询获胜

如果浏览器窗口处于一定宽度,如何使div不显示?

 @media all and (max-width: 1024px) { /* Change Width Here */ div.class_name { display: none; } }