Question

当我在手机设备（如手机，平板电脑）中打开网站时，我正在使用sharethis小部件的网站上工作，这个小部件会隐藏内容并打扰正常查看网站。所以，我尝试了以下方法来隐藏手持设备上的共享小部件

方法1：

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();
   }

方法2：

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

方法3：

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

#sthoverbuttons 是sharethis小部件的容器

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

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

Answer 1

您可以使用CSS3媒体查询执行此操作。手持设备通常被分类为<600px宽，因此在您的css文件中添加这样的内容可以解决您的问题：

@media screen and (max-width: 599px){
    #sthoverbuttons { display: none; }
}

Answer 2

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

<html class="webkit chrome mac js">

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

CSS浏览器选择器中可用的其中一个类实际上是mobile，因此您可以根据max-width上的媒体查询来定位您的按钮，这不是最终结论：

html.mobile #sthoverbuttons { display: none; }

如何在移动/手持设备上隐藏共享小部件

2 个答案: