web-dev-qa-db-ja.com

レスポンシブウェブデザインと高解像度ディスプレイ（iPhone 4/5）

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

http://test.studev.net/

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

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

cssmobileresponsive-design
14
stu177

モバイルでテキストを小さくしたい場合、または大きくしたい場合は、

@media screen and (max-width: 480px) {
    font-size: 10px; /* Smaller */
}

または

@media screen and (max-width: 480px) {
    font-size: 20px; /*Larger*/
}

そして、<HEAD>タグにこれがあることを確認してください。

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

または、次のようにズームを無効にすることもできます。

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

IE10をサポートするには、次のことを試してください。

@-ms-viewport{
    width:device-width
}
15
iConnor

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

    /* 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;
    }

モバイル画面でレイアウトを確実に拡大するには、ビューポートメタタグを使用する必要があります。

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

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

Initial-scale = 1は、自動的に100％にズームされることを意味します。 （0.5 => 50％）

6
Itay Gal