0

私はモバイル デバイス用のサイトを開発するのは初めてで、私よりも詳しい人からの洞察を探しています。このプロジェクトを開始して以来、iPhone と Android の間には多くの違いがあることを知りました。これは主にデバイスのピクセル密度によるものだと思います。ページが表示される前にユーザーのデバイスのピクセル密度を判断するために、いくつかのデバイス クエリを CSS に組み込みました。

さまざまなデバイスのさまざまな変数に合わせて CSS を微調整しようとしていますが、あるデバイスで機能するものが別のデバイスでは機能しません (つまり、フォント サイズ、行の高さなど)。

私の質問はこれです...私のサイトがさまざまなデバイスやオペレーティング システムでどのように表示されるかを決定する変数は何ですか? 私が知っているのは 1 つだけで、それはピクセル密度です。デバイスの幅と高さ以外に他にあるものはありますか? アスペクト比をターゲットにする必要がありますか?

あなたが私に与えることができる洞察は大歓迎です。

私が取り組んでいるサイトはhttp://m.usci.westondev.comで見ることができます。

4

1 に答える 1

2

さまざまなデバイスでサイトがどのように表示されるかを判断するには、次のdevices breakpoints ようなメディアクエリから始める必要があります。

    /* 600px/16px = 37.5em */
    @media all and (min-width: 37.5em) {
    ...
    }
    /* 940px/16px = 58.75em */
    @media all and (min-width: 58.75em) {
    ...
    }
    /* 1300px/16px = 81.25em */
    @media all and (min-width: 81.25em) {
    ...
    }

より詳細なチュートリアルはここにあります、そしてこの答えはまたいくつかのかなりを与えます

于 2013-03-08T17:43:33.107 に答える