7

次の 2 つの CSS と JS コードを使用しています。

@media (max-width: 720px) {
    // a code to make arrows in a carousel disappear
}

if(jQuery(window).width() <= 720){
    // a code to make arrows in the carousel stop working
}

それらの問題は、後者が 720px ではなく正確に width=738px で実行されることです。これは、Chrome で幅が 18px に等しいブラウザの垂直スクロールバーが原因であると思われます。

これを統一する方法はありますか？スクロールバーの幅に関係なく、すべてのブラウザーでこれらのアクションが同時に発生することを望みます。

テスト (ブラウザが @ 720px で、CSS が既に実行されている場合):

jQuery(document).innerWidth() = 703
jQuery(window).innerWidth() = 703
jQuery(document).width() = 703
jQuery(window).width() = 703
jQuery('body').width() = 703
jQuery('html').width() = 703
4

5 に答える 5

8

少し前に同じ問題に取り組む必要がありましたが、これまでのところ、メディア クエリを使用して実際のウィンドウ サイズを Javascript に渡すことが最も正しい解決策でした。次の手順に従う必要があります。

  • ページに非表示の要素を追加します。
  • メディア クエリを使用してmax-width、その要素のプロパティを変更します。
  • max-widthJavascript を介してその要素のプロパティを読み戻します。

たとえば、次の要素をページに追加します。

<div id="currentMedia"></div>

次に、次の CSS ルールを記述します。

#currentMedia {
    display: none;
}

@media (max-width: 720px) {
    /* Make arrows in the carousel disappear... */

    #currentMedia {
        max-width: 720px;
    }
}

次に、Javascript 側から、次のように記述できます。

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) {
    // Make arrows in the carousel stop working...
}

また、値はカルーセルの非表示をトリガーするのと同じメディア クエリから取得されるため、スクロールバーのサイズに関係なく正確です。

最近のすべての主要なブラウザーでこのソリューションをテストしたところ、正しい結果が得られました。

于 2013-08-30T07:43:40.637 に答える
1

少し古いスレッドですが、この解決策を見つけました

function getWidth(){
   return ((window.innerWidth > 0) ? window.innerWidth : screen.width);
}
于 2016-09-21T20:51:52.353 に答える