タブレットまたはデスクトップではなく、モバイル上でli要素のみを非表示にする

Question

ブートストラップとjqueryを使用して携帯端末でliリストを非表示にするフッターを指定すると、タブレット/デスクトップのリンクを表示できる必要があります。この現在のパターンでは、リンクはモバイル、タブレット、デスクトップに表示されません。 display:noneプロパティをvisibleに設定すると、chrome開発ツールで機能しますが、これを行うにはタブレットとデスクトップをターゲットにする最良の方法が不明です。

HTML

<div class="row"> 
    <div class="col-lg-12"> 
    <div class="footer-links"> 
     <div class="row"> 
     <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#about"> 
      <h4 class="panel-title"> 
      <a class="accordion-toggle"> 
      <i class="material-icons">&#xE145;</i> 
      Link Head 
      </a> 
     </h4> 
      <ul class="visible-sm visible-md visible-lg collapse" id="about"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#why"> 
      <h4 class="panel-title"> 
      <a class="accordion-toggle"> 
      <i class="material-icons">&#xE145;</i> 
      Link Head 
      </a> 
     </h4> 
      <ul class="visible-sm visible-md visible-lg collapse" id="why"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#quicklinks"> 
      <h4 class="panel-title"> 
      <a class="accordion-toggle"> 
      <i class="material-icons">&#xE145;</i> 
      Link Head 
      </a> 
     </h4> 
      <ul class="visible-sm visible-md visible-lg collapse" id="quicklinks"> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      <li><a href="">link</a></li> 
      </ul> 
     </div> 
     <div class="col-md-3 col-sm-8"> 
      <h4 class="deal-text"><strong>A bit of ad text</strong>will go here</h4> 
     </div> 
     <div class="col-md-3 col-sm-4"> 
      <div class="footer-share"> 
      <a href=""><img src="/img/facebook_icon.png"></a> 
      <a href=""><img src="/img/twitter_icon.png"></a> 
      <a href=""><img src="/img/linkedin_icon.png"></a> 
      <a href=""><img src="/img/youtube_icon.png"></a> 
      <a href=""><img src="/img/google_icon.png"></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

jQueryの

$('[data-toggle="collapse"]').click(function(e){ 
    if ($(window).width() >= '480') { 
    e.stopPropagation(); 
    } 
    else if($(window).width() <= '480'){ 
    $('.panel').on('click',function(){$('.collapse').collapse('hide');}) 
    } 
}); 

UPDATED JSFIDDLE：visible-sm visible-md visible-lgとUPDATで更新https://jsfiddle.net/mxv9yq4m/10/

ED JSを無効にするdata-toggleモバイルデバイス上ですが、今問題はモバイル上でクリックイベントを有効にする方法です

Answer 1

モバイルのスペースを節約するためにそれらを折りたたむことですか？

技術的な観点から、携帯電話とタブレットの明確な定義がないため、携帯電話を盗聴する簡単な方法はありません。考えてみましょう：Androidの携帯電話は4k本、Androidのタブレットは1024pxです。すべてAndroidのブラウザを使用しているため、すべて同じユーザーエージェントの文字列になります。あなたはタブレットの画面サイズをインチ単位で考えていますか？ファケットはどうですか？ 「電話」と「タブレット」を念頭に置いて設計しないでください。代わりに画面サイズを設計してください。彼らが合わない場合はリンクを隠し、そうであれば表示してください。とにかくそれはあなたの最終目標ですよね？

ページの読み込み時にビューポートの幅と高さを確認してから、特定の数よりも小さいか大きい場合はブラウザのサイズを変更して決定しますデザインが開いていなくなるまで開きます）、すべてのパネルの折りたたみメソッドを呼び出します。あなたはjQueryのを使用しているので：

$(document).ready(function(){ 
    if(window.innerWidth < someNumber){ 
     //do your collapsing code here 
    } 
}) 

Answer 2

あなたはほとんど問題ませんブートストラップを使用している場合。 visible-smを使用して、タブのリンクとvisible-lgのみをデスクトップ用に表示します。