2

現在、私は Web アプリを構築しています。デバイスで 780 ピクセル未満の解像度には jquerymobile を使用し、780 ピクセルを超える解像度にはブートストラップを使用したいと考えています。これは可能ですか? いろいろ調べてみたのですが、解決策がわかりません。両方の断片を使用したいのですが、問題は、これが互いに強く競合することです... 2 つの別々のサイトを構築したくありません。応答性が損なわれるからです。

Twitter ブートストラップ: http://twitter.github.com/bootstrap/
jQueryMobile: http://jquerymobile.com

ここに私の頭があります...

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php echo Asset::js('jquery.js'); ?>
    <?php echo Asset::css('bootstrap.min.css'); ?>
    <?php echo Asset::js('bootstrap.min.js'); ?>
    <?php echo Asset::css('bootstrap-responsive.css'); ?>
</head>
4

4 に答える 4

2

2 つのライブラリのマークアップ javascript と css の違いにより、ウィンドウのサイズ変更時に Bootstrap (またはその逆) から jQM に単純に切り替えることはできません。ただし、ブートストラップに、サイトの jQM バージョンに移動する低解像度画面用のボタンを表示させることができます。

別のオプションは、ページの読み込み時で、デバイスの幅を確認してリダイレクトを行います。

于 2013-01-09T15:36:37.583 に答える
1

Adapt.jsがうまくいくかもしれません。これは、ウィンドウの幅をチェックして適切な CSS を提供する軽量の JavaScript です。理論的には、ウィンドウ幅が 780 未満の場合は jquerymobile css を指定し、780 を超える場合はブートストラップを指定します。

以前にadapt.jsを単独で使用したことがありますが、それは魅力的でした。実際にアイデア全体をテストしない限り、javascript の競合があるかどうかはわかりません。

幸運を

于 2013-01-10T02:36:01.910 に答える
0

780pxを超える解像度の場合にのみブートストラップcssを含めることを試みることができます

<link href="bootstrap.min.css" rel="stylesheet" media="only screen and (min-width:780px)">
<link href="bootstrap-responsive.css" rel="stylesheet" media="only screen and (min-width:780px)">

jqueryMobileの場合、通常はマークアップが必要なため、メディアクエリだけで有効/無効にすることはできません。

于 2013-01-09T15:31:11.837 に答える
0

jQuery Mobile Bootstrap テーマを試すこともできます。

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

Github でホストされており、現在のバージョンの jQuery Mobile (1.2) で動作することが確認されています。

于 2013-02-08T02:41:15.580 に答える