3

携帯電話/タブレットユーザーに合わせて調整できる必要があるTwitterブートストラップページを作成しています...「hidden-phone」およびその他のクラスを使用しています：http：//twitter.github.com/bootstrap/scaffolding。 html＃response
完全に機能し、たとえば携帯電話ではまったく異なるスタイルを示します。

私が心配しているのは、モバイルデバイスの読み込み時間だけです。たとえば、「hidden-phone」クラスのコードがある場合は、レンダリングしてはならないことを確認する必要があります。したがって、モバイルユーザー用に個別の.html / .phpファイルを用意することをお勧めしますか？または、すべてのjquery、css、その他のjavascriptのものとhtmlコードをモバイルにロードしないためのより良い方法はありますか？

質問が十分に明確であることを願っています。そうでない場合は、私に知らせてください。より適切に説明しようと思います。

4

2 に答える 2

2

さまざまなデバイスや画面サイズをサポートするために個別のファイルとスクリプトを作成することもできますが、これによりコードベースが多少断片化されてしまいます。

Bootstrap にはメディア クエリが組み込まれているため、それらを使用して、画面幅に基づいて使用する CSS を拡張または制限できます。すべてのデバイスにすべてのクラスとスタイルを含める代わりに、それらを分割して次のようにすることができます。

<link rel="stylesheet" media="screen and (min-width: 1024px)" href="default.css"/>
<link rel="stylesheet" media="screen and (max-width: 1023px)" href="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 570px)" href="phone.css"/>

JavaScriptで同じことをするのも簡単です。JS ファイルにメディア クエリ スタイルを含めることができます。1 つの例は、スクリプト ローダーyepnope.jsとModernizrの使用です。

yepnope 内で mq () メディア クエリ テストを使用して、メディア クエリをテストすることにより、JS 関数/スクリプトを実行または含めることができます。

yepnope({
    Modernizr.mq('only screen and (max-width: 485px)') // Media query test
    yep  : 'phone.js',
    nope : ['default.js', 'tablet.js'] 
});

フレームワーク/コードベースを適切に設計すると、モバイルやその他すべてのデバイスのフットプリントが削減されます。

于 2013-03-22T14:06:42.567 に答える
1

大きな画像が問題になる場合は、CSS を介して背景画像として読み込むようにしています。これにより、@media リクエストを使用して異なる視点に対して異なる (背景) 画像を指定できます。 

@media (min-width:980px){

.image-background{
width:800px;
height:400px;
background:url("large-image.jpg") top left no-repeat;
}
}

@media (max-width:600px){

.image-background{
width:400px;
height:200px;
background:url("phone-image.jpg") top left no-repeat;
}
}  

etc

.image-background div の幅にパーセンテージを使用してこれをさらに調整し、cover や containなどの新しい CSS オプションを使用して div 内の画像をスケーリングできます。

このアプローチは、サイト上のすべての画像に対して実用的ではありませんが、ホームページに大きなスプラッシュ画像があるとします。

編集
興味深い画像関連のもう 1 つのオプションは、adaptive-images.comです。これは、ビューアの画面サイズと設定したブレーク ポイントに基づいて、その場で画像のサイズを変更します。

レスポンシブ サイトにさかのぼってインストールできるため、サイトに適しているかどうかをテストする価値があるかもしれません。

幸運を！

于 2013-03-23T16:48:15.297 に答える