3

ビジネス用のウェブサイトを開発しています。これはどう考えても Web アプリケーションではありませんが、単にデスクトップ バージョンをスケーリングするのではなく、モバイル デバイスでも問題なく表示されるようにしたいと考えています。メディア クエリとレスポンシブ/アダプティブ デザイン アプローチについて多くの調査を行った結果、モバイル レイアウトは、ユーザーが実際に小さな画面を使用している場合にのみ機能し、デスクトップ ウィンドウのサイズを変更するだけでなく、ソリューションはシンプルで、メディアを使用して達成できるというものでした。クエリと最小限の JavaScript。

私が思いついたアプローチは次のようなものです。

<script type="text/javascript"> 
var isRetina = window.devicePixelRatio > 1 ? true : false;
var isMobile = (screen.width < 768) ? true : false;

if (isMobile && isRetina) {
    SHOW MOBILE LAYOUT AND HI-RES IMAGES
} else if (isMobile && !isRetina) {
    SHOW MOBILE LAYOUT AND LO-RES IMAGES
} else if (!isMobile && isRetina) {
    <<SHOW HI_RES IMAGES>>
} else if (!isMobile && !isRetina) {
    SHOW DESKTOP LAYOUT AND LO-RES IMAGES
}
</script>

このアプローチにコミットする前に、チェックインして、問題や恐ろしい問題が私を待っているかどうかを確認することにしました. または、この目標を達成するためのさらに簡単で優れた方法がある場合。私はSOでたくさん検索しましたが、これとまったく同じソリューションを使用することについて言及していません。

4

2 に答える 2

1

CSS レイアウトをロードするときに javascript が推奨される方法ではない理由は、通常、ブラウザがページをレンダリングするときに javascript が最後にロードされるためです。これは、正しい CSS をロードする前に、最初のレイアウトが一瞬画面に表示されることを意味します。最も簡単で理想的なアプローチは、CSS3 メディア クエリを利用することです (この簡単なチュートリアルのようなものは大いに役立つでしょう: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps )。

もう 1 つのオプションは、Modernizr を使用して、ビューポート サイズに基づいてロードするスタイルシートまたはその他のファイルをロードすることです。Modernizr Docを調べると、基本的に、Web ページの表示に使用されている現在のブラウザーの機能と機能を「テスト」し、それに応じてファイルを読み込むことができます。補足として、Modernizr は JS ライブラリであるため、CSS ファイルをロードするときは注意して使用してください。初期レイアウトのスプラッシュ スクリーンなしでロードすることが知られていますが、メディア クエリに基づいてレイアウトをロードするためのベスト プラクティスは次のとおりです。 CSS3 メディア クエリ自体を使用します。

于 2012-07-01T17:50:05.780 に答える
-1

コメントを追加できませんでした。 window.devicePixelRatioFirefox (Mac だと思います) では、ズームインすると 1 よりも大きくなり、バグが発生する可能性があります

navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)

これは役立つかもしれません

于 2013-09-11T14:02:23.167 に答える