在特定的屏幕分辨率下隐藏标签

Hide a tag at certain screen resolution

本文关键字：隐藏 标签 分辨率 屏幕      更新时间：2023-09-26

我想在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版本的winxp兼容。

哪种技术可以做到?Javascript, CSS还是jQuery?

实际上媒体查询在小于9的ie浏览器中不工作。如果你只想操作这个元素，我建议使用jQuery的方式

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

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

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

如果你想用你的代码做一些其他神奇的事情，但我明白，你不需要。如果你有更多的元素修改在一定的分辨率，我建议使用css媒体查询和兼容"awesome"IE你可能会使用respond.js

try this 

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

你必须使用

screen.height;
screen.width;

基于这些值，你可以计算你的保证金，无论什么适合你。$(window).width() & $(window).height()给出了浏览器窗口的宽度和高度，而不是分辨率

这里的例子

使用媒体查询!

将代码封装在容器中:

<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 }
}
相关文章：