14

私は最近、レスポンシブ Web デザインをいじり始め、ここで基本的なテストを行いました。

http://test.studev.net/

デスクトップ ブラウザーでは問題なく動作しますが、iPhone の Retina ディスプレイなどの高解像度デバイスにロードされたときに最小幅のデザインを処理する方法について少し混乱しています。このタイプの表示のため、たとえば、デスクトップで読むのに通常のサイズ 16px が、iPhone 4/5 では読むことができないことを意味します。

これは通常どのように扱われますか？

4

2 に答える 2

6

画面幅に応じてフォントのサイズを選択できます。

    /* Large desktop */
    @media (min-width: 1200px) {
        font-size: 18px;
    }

    /* Portrait tablet to landscape and desktop */
    @media (min-width: 768px) and (max-width: 979px) {
        font-size: 16px;
    }

    /* Landscape phone to portrait tablet */
    @media (max-width: 767px) {
        font-size: 14px;
    }

    /* Landscape phones and down */
    @media (max-width: 480px) {
        font-size: 12px;
    }

モバイル画面でレイアウトが引き伸ばされるようにするには、viewport メタ タグを使用する必要があります。

<meta name="viewport" content="width=device-width, initial-scale=1" />

このメタ タグは head タグ内にある必要があります。「デバイス幅」は、画面に表示できる最大ピクセルになります。そこに定数値 (600px) を設定することもできます。

initial-scale=1 は、自動的に 100% にズームされることを意味します。(0.5 => 50%)

于 2013-04-17T20:44:48.980 に答える