1

我想以 1024 X 768 或更低的屏幕分辨率隐藏以下代码：

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ankitnagpal"></script>
<!-- AddThis Button END -->

我该怎么做？请分享一些代码或参考资料。分辨率较低的用户通常使用 Win XP。所以请查看该解决方案是否兼容IE版本的Win XP。

哪种技术可以做到？Javascript、CSS 还是 jQuery？

4

4 回答 4

2

实际上媒体查询在低于 9 的 Internet Explorer 中不起作用。如果你只想操作这个元素，我建议使用 jQuery 方式

if ( $(window).width() <= 1024 && $(window).height() <= 768 )
  $('.addthis_toolbox').hide();

实际上它并没有做什么特别的事情。当然，你可以使用

$(window).on('resize', function(){ ... });

如果你想用你的代码做一些其他的事情，但我理解的是，你不需要。如果您有更多元素要以特定分辨率修改，我建议使用 css 媒体查询并与“真棒” IE 兼容，您可能会使用respond.js

于 2013-06-05T07:04:54.293 回答
0

试试这个 

  $(window).width() for width AND
  $(window).height() for height 

 var your_width  = 1024;
 if($(window).width() > your_width)
  {
        //don't show
  }else{
       //show
  }
于 2013-06-05T06:18:46.780 回答
0

你必须使用

screen.height;
screen.width;

根据该值，您可以计算出适合您的保证金。 $(window).width() & $(window).height()给出浏览器窗口的宽度和高度而不是分辨率

这里的例子

于 2013-06-05T06:27:45.590 回答
0

使用媒体查询！

将代码包装在容器中：

<div id="container">
    <!-- AddThis Button BEGIN -->
    <div class="addthis_toolbox addthis_default_style">
    <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
    </div>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ankitnagpal"></script>
    <!-- AddThis Button END -->
</div>

CSS：

@media screen and (max-height: 768px) and (max-width: 1024px) {
   .container { display: none }
}
于 2013-06-05T06:47:33.647 回答