0

問題

Web サイトの上部に、html と js の組み合わせを使用して構築されたカルーセルを使用しています。サイトへのモバイル訪問者の場合、マークアップのその部分を省略して、幅が 800px 未満のビューポートの場合など、画像を読み込む必要がないようにしたいと思います。私が行ったことは、jquery を使用してブラウザの幅を取得するスクリプトをページの下部に作成し、幅が十分に大きい場合は .prepend() を使用して、カルーセルのマークアップ全体を body 要素の上部に配置することです。 . 明らかに、このソリューションは機能しますが、特にカルーセル マークアップを変更する必要がある場合は、見栄えがよくありません。

カルーセルのマークアップ

<div class="row">
<div class="span12 columns">
<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
      <img src="img/1.jpg">
      <div class="carousel-caption"><h4>Hello</h4></div>
    </div>
    <div class="item">
      <img src="img/2.jpg">
      <div class="carousel-caption"><h4>World</h4></div>
    </div>
  </div><!-- Carousel inner-->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">prev</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">next</a>
</div>  <!--Carousel outer-->
</div><!--span-->
</div><!--row-->

JavaScriptは次のようになります...

if (windowWidth >= 800) {
    $('.content').prepend('...all the markup for the carousel no spaces or returns...');
}

質問

これはせいぜい問題に対する大雑把な解決策でなければなりませんが、この種の良い方法を知っている人はいますか? js/jquery は私の最良の選択肢ですか? 理想的には、画面サイズが小さい場合はカルーセルをバイパスしたいのですが、モバイル用に別のページを設計するのではなく、すべてを 1 つのページに保持します。

4

5 に答える 5

1

メディア クエリを実行し、ブラウザの幅が特定のサイズを下回っている場合は、カルーセルに display: none を実行できます。または、以下のようなものをいじる必要があるかもしれません。

@media only screen and (max-width: 767px) {
  #myCarousel { display: none; }
}
于 2012-05-31T19:41:55.297 に答える
0

ページが800pxより大きい場合は、マークアップを挿入するのが最善です。

たとえば、次のようになります。

@media screen and（min-width：800px;）

＃myCarousel {display：block; および他のすべての必要なスタイル}

}

次に、必要に応じて、jQueryで行ったようにマークアップを追加できます。

于 2012-05-31T19:56:22.420 に答える
0

これをクライアント側で行う必要がある理由はありますか? 条件をサーバー側に配置すると、大量のデータ転送が節約されます。php や jsp などで行うのは簡単です。

サーバー側でブラウザーの詳細を取得することはできませんが、ユーザー エージェントを取得することはできます。

だから私がすることは、上記の提案の組み合わせです-

1) サーバー側のチェックから始めます。iOS/Android/Blackberry/その他のランダムなモバイル プラットフォーム用のユーザー エージェントを取得する場合は、カルーセル マークアップを完全にバイパスします。

2) そのユーザー エージェントを取得していないと仮定すると、Modernizr ルートに進みますが、$(document).ready の後までカルーセルのアセットを読み込まないでください。その時点で、画面サイズとブラウザーの機能 - アセットの読み込みとカルーセル スクリプトの処理を開始できるのはこのときです。

于 2012-05-31T23:13:00.323 に答える
0

画面幅のプロパティを調べ、それに応じてコードを実行することで、カルーセルの HTML を(非表示/削除する代わりに) ページの読み込み後に DOM に追加できます。

JavaScript から文字列として挿入するか、AJAX を介して選択的にロードすることで、モバイル ユーザー向けにさらに軽量に保つことができます。

于 2012-05-31T19:45:09.510 に答える
0

これらのスクリプトを見てください。画面サイズをテストする必要なく、モバイル ブラウザーを検出します。結果に基づいて、カルーセルなしで別のバージョンにリダイレクトするか、modernizrという JS プラグインを使用してタッチ イベントをテストし、次のように存在する場合にのみカルーセルをロードすることもできます。

if (Modernizr.touch){
   // Load Carousel
} else {
   // Hide Carousel or Load Alternative Content
}

これが役立つことを願っています。

于 2012-05-31T19:46:56.280 に答える