0

モバイル、タブレットなどのハンドヘルド デバイスでサイトを開くと、sharethis ウィジェットを使用して web サイトに取り組んでいます。そこで、以下の方法を試して、ハンドヘルド デバイスで 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 を割り当てて Web ページをロードするときに、スクリプト 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

次のように、現在のブラウザとOSを対象とする一連のクラスをタグに書き込む小さなJavaScriptであるCSSBrowserSelectorを試すことができます。<html>

<html class="webkit chrome mac js">

つまり、私はMacを使用しており、Chrome（Webkitエンジン）を使用しており、JavaScriptがアクティブになっています。

CSS Browser Selectorで使用可能なクラスの1つは実際にはmobileであるため、メディアクエリを無視してボタンをターゲットにすることができますが、これmax-widthは決定的なものではありません。

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