0

当我在手机、平板电脑等手持设备中打开网站时，我正在使用 sharethis 小部件在网站上工作，sharethis 小部件会隐藏内容并干扰正确查看该网站。所以，我尝试了以下方法来隐藏手持设备上的 sharethis 小部件

方法一：

var ua = navigator.userAgent.toLowerCase();
    var checker = {
        iphone: (ua.indexOf('iphone') >= 0 || ua.indexOf('ipod') >= 0 ||ua.indexOf('ipad') >= 0) ? true : false,
        blackberry: ua.indexOf("blackberry") >= 0 ? true : false,
        android: ua.indexOf("android") >= 0 ? true : false,
        chrome: ua.indexOf("chrome") >= 0 ? true : false,
        nokia: (ua.indexOf("symbian") >= 0 || ua.indexOf('nokia') >= 0) ? true : false
    };

   if (checker.android || checker.iphone || checker.blackberry || checker.nokia) {
       $('#sthoverbuttons').hide();
   }

方法二：

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
      $('#sthoverbuttons').hide();
    }

方法三：

  if($(window).width() < 980)
   {
      $('#sthoverbuttons').hide();//this one works but i need to find devices and hide.
   }

其中 #sthoverbuttons是 sharethis 小部件的容器

而且我还尝试在加载网页时通过将 id 分配给脚本标签来删除脚本 sharethis 脚本，但这也对我没有帮助。

那么，如何在手持设备中隐藏 sharethis 小部件

4

2 回答 2

1

您可以使用 CSS3 媒体查询来做到这一点。手持设备通常被归类为 <600px 宽，因此在您的 css 文件中添加类似这样的内容应该可以解决您的问题：

@media screen and (max-width: 599px){
    #sthoverbuttons { display: none; }
}
于 2013-01-11T05:44:07.013 回答
0

您可以尝试CSS Browser Selector，这是一个小型 javascript，它在您的<html>标签中写入一堆针对当前浏览器和操作系统的类，如下所示：

<html class="webkit chrome mac js">

意思是我在 Mac 上，使用 Chrome（Webkit 引擎），并且 javascript 处于活动状态。

CSS Browser Selector 中可用的类之一实际上是mobile，因此您可以定位您的按钮而忽略媒体查询，max-width这不是决定性的：

html.mobile #sthoverbuttons { display: none; }
于 2013-01-11T13:47:02.407 回答