Question

我想在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？

Answer 1

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

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

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

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

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

Answer 2

试试这个

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

 var your_width  = 1024;
 if($(window).width() > your_width)
  {
        //don't show
  }else{
       //show
  }

Answer 3

你必须使用

screen.height;
screen.width;

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

Example here

Answer 4

使用媒体查询！

将您的代码包装在容器中：

<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 }
}

以特定屏幕分辨率隐藏标记

4 个答案: