3

既存のウェブサイトをモバイルレイアウトに後付けするように依頼されました。WebサイトはWordpressTwenty11フレームワーク上に構築されていたため、そのフレームワークの既存のメディアクエリを使用してモバイルレイアウトを構築することにしました。

さて、私のモバイルレイアウトは、幅が420px未満になるようにドラッグダウンしたデスクトップブラウザでは見栄えがしますが、iPhoneとAndroidのモバイルブラウザでは、とにかく全幅のWebページが読み込まれます。完全なWebエクスペリエンス、うわー！

クライアントは不幸です。モバイルデザインをすべてのiPhoneブラウザに表示したい。そこで、モバイルCSSを完全に無視して、モバイルブラウザがデスクトップの全幅でページを表示することを主張する理由を理解する必要があります。

これが私のメディアクエリです。メインのstyle.cssドキュメントの下部にあります。

@media (max-width: 800px) {
/* Design starts to get a little more fluid */
}

@media (max-width: 650px) {
/* Design gets quite a lot more fluid, and columns start dropping off the edge to below     main content */
}

@media (max-width: 450px) {
/* Totally changed navigation for small viewports, main content takes up whole viewport */
}

デスクトップマシンのブラウザウィンドウのサイズを手動で変更すると、これらすべてが私が望むことを実行します。彼らはまた、私が次に役に立たないiFrameベースの「iPhoneエミュレーター」でそれらをテストするときに私が望むことをします。しかし、これまでにテストされたすべてのモバイルデバイスは、全幅のレイアウトを示し、実際にズームアウトされて読めなくなりました。

モバイルブラウザにモバイルCSSを表示させるために、これらのメディアクエリに追加する必要があるものはありますか？それとも、ユーザーエージェントの検出など、まったく別の戦略を採用する必要がありますか？

追加するために編集：header.phpのこの行のようなもの、私は推測しています：

<meta name="viewport" content="width=960,
                           maximum-scale=1.0">

実際には

<meta name="viewport" content="width=device-width,
                           maximum-scale=1.0">

右？

4

1 に答える 1

2

min-width最大幅が800px未満になるため、現時点では、画面が小さい人が3つのメディアクエリすべてからルールを取得するため、メディアクエリにパラメータを追加する必要があります。

@media (min-width: 651px AND max-width: 800px) {
    ...
}

@media (min-width: 451px AND max-width: 650px) {
    ...
}

@media (max-width: 450px) {
    ...
}

メディアクエリを複雑にしすぎると、多くの問題が発生します。ブラウザが異なれば、それらの処理も異なり、本番環境には理想的とは言えません。

window.resize私が使用したいメソッドは、要素にクラスを追加するだけのイベント用の単純なJSイベントハンドラーを作成して<html>、ユーザーがどの画面ブレークポイントにいるかを指定することです。次に、CSSで、ルールの前にブレークポイントクラスを付けます。

$(window).on('resize', function () {
    var w = $(this).width();
    if (w > 1400) {
        $('html').addClass('widescreen-viewport');
    } else if (w > 1024) {
        $('html').addClass('desktop-viewport');
    } else if (w > 767) {
        $('html').addClass('tablet-viewport');
    } else {
        $('html').addClass('mobile-viewport');
    }
});

jQueryについては申し訳ありませんが、これは確かに機能することがわかっている方法です。

その場合、CSSは次のようになります。

#some-element {
    /*default styles*/
}
.widescreen-viewport #some-element {
    /*widescreen styles*/
}
.desktop-viewport #some-element {
    /*desktop styles*/
}
.tablet-viewport #some-element {
    /*tablet styles*/
}
.mobile-viewport #some-element {
    /*mobile styles*/
}

この方法では、JSを有効にする必要があるため、より優れたブラウザーサポートが提供されますが、それ以外の場合は、その時点からIE6/5.5およびその他のブラウザーに戻ります。

于 2012-07-10T16:21:50.040 に答える