画面の幅に応じてスクリプトを調整する方法

スクリプトにドロップダウンメニューが表示されています。携帯端末の高さを調整する必要があります。私は通常、メディアのクエリでこれを行うだろうが、この場合私はそうではありません。

画面幅> 768 maxH = "306px"、それ以外の場合はmaxH = "450px" - を確認する必要がありますが、書き方についてはわかりません。

function toggleNavPanel(x) {     

      var panel = document.getElementById(x), 
       navarrow = document.getElementById("navarrow"), 

       //checking for screen width here and defining maxH     

       //maxH = "306px"; 

       if (window.screen.availWidth > 768) { 
        maxH = "450px"; 
        } else { 
        maxH = "306px"; 
        } 

      if (panel.style.height == maxH) { 
       panel.style.height = "0px"; 
       panel.color = "#000000"; 
       //navarrow.innerHTML = "menu"; 
       navarrow.classList.remove('menuX'); 
       navarrow.classList.add('menuLines'); 
      } 
      else { 
       panel.style.height = maxH; 
       panel.color = "#ffffff"; 
       //navarrow.innerHTML = "close"; 
       navarrow.classList.remove('menuLines'); 
       navarrow.classList.add('menuX');      
      } 
     }

あなたがwindow.screen.availWidthとwindow.screen.availHeightを経由して画面サイズを取得することができ、ここで http://www.dougcowan.net.nz/article/placeholding-test-article-for-testing

出典

2017-03-06 Grant

アクションでスクリプトを見ることができます。画面APIの詳細については、https://developer.mozilla.org/en-US/docs/Web/API/Screenをご覧ください。

if (window.screen.availWidth > 768) { 
    // Your code here. 
} else { 
    // Your code here. 
}

出典

2017-03-06 00:58:09

ありがとうございます、私はあなたの提案を試みました（上記の編集を参照）。それはまだ動作しません。 – Grant

あなたは何をしようとしているのかよく分かりませんが、あなたがしようとしていると思われるウィンドウの幅を変更すると、navレイアウトが応答しているようです。あなたのページをデザインするのにあまり時間を費やさなかったなら、モバイルフレンドリーなレイアウトを心配するならば、私はブートストラップのようなフレームワークを使うことを考えます。独自のメディアクエリを作成したり、onresizeイベントをリスンするよりはるかに簡単です。 –

こんにちは、ありがとう。このリンクを見ると、http：//www.dougcowan.net.nz/articles/testing.htmlに変更されたコードがあり、残念ながらドロップダウンは機能しなくなりました。ドロップダウンの高さを変更して、電話機のナビゲーションを切断しないようにしたいだけです。残念ながら、私は既存のセットアップに追加するように求められているので、レイアウトに固定されています。 – Grant

あなたはwindow.outerWidthとwindow.outerHeightを使用することができます。

出典

2017-03-06 00:58:21 cyrix

画面の幅に応じてスクリプトを調整する方法

答えて

関連する問題