1

私はレストランのウェブサイトを構築しており、TW Bootstrap を介してメニューをモーダルの画像としてロードしています。コードは次のようになります。

          <div id="menu" class="modal hide fade in" style="display: none; ">
              <div class="modal-header">
                <a class="close" data-dismiss="modal">×</a>
              </div>
              <div class="modal-body">
                <img src="assets/menus/brunch.jpg">
              </div>
          </div>
          <a data-toggle="modal" href="#menu" >BRUNCH</a></p>

これはデスクトップ ブラウザでは問題なく動作しますが、モバイル ブラウザでは、画像のサイズによってスクロールやズームが少しぎこちなくなります。クライアントは、モバイルでモーダルを破棄し、ユーザーがメニュー リンクをクリックしたときに新しいページに画像をロードすることを望んでいます。

メディア クエリと JavaScript ブラウザーの検出に関する多くの記事を読んだことがありますが、私がやろうとしているのはかなり小規模なものだと感じています。これを行うための最も簡単で痛みのない方法は何ですか?

4

1 に答える 1

2

デバイスがモバイル ブラウザかどうかを Web サーバーに検出させます。モバイル デバイスのように見える場合は、画像がモーダルではなくインラインになっているページのモバイル バージョンにリダイレクトします (また、必要がない場合に備えて、サイトのフル バージョンへのリンクを下部に提供します)。モバイル コンテンツを表示するには）。

于 2012-10-04T20:34:41.813 に答える