レスポンシブデザインでメディアサイズを知る方法

2016年6月8日Web-log・ココログ関連,WordPress,パソコン・インターネット

レスポンシブデザインに対応したWordPressテーマは、ほぼ完成形に近づいています。画面サイズはpxで指定しています。em指定も考えたのですが、pxの方が設計しやすかったからです。本ウェブサイトは、画面サイズ(幅)に応じて、次のようにレイアウトが変化します。

デバイス	画面幅(min)	設定内容
ガラホ	<320px	検索窓を左上に
iPhone縦	320px〜	検索窓左に隙間
iPhone横	480px〜	検索窓を通常位置に
iPad縦	768px〜	2カラム表示(狭)
タブレット横	960px〜	2カラム表示(通常)

最初、タブレットの横サイズを、iPadの横基準の1024pxにしていました。

レスポンシブデザインのテーマを全面採用 : プラスα空間 (2016年3月26日)

他のタブレットの画面サイズを調べてみると、横画面で960pxと言う物が多数あったので、それに合わせて変更しました。

Viewport Sizes

それと、viewportの設定が不十分だったので(“initial-scale=1″が抜けてました)、次のページを見て修正しました。ありがとうございます。

もう逃げない。HTMLのviewportをちゃんと理解する – Qiita

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

画面のレイアウトを見れば、どの状態になっているかはわかるのですけれど、正確に確実に知りたいと思い、方法を考えてみました。その方法とは、メディアサイズをCSSのクラス擬似要素のcontentとして表示する事です。

htmlソースには、次のように書いておきます。ワザとカッコを閉じていません。

        <div class="media">(media</div>

CSSの"media"クラスに関して、次のように設定します。

.media {
    text-align: center;
    -webkit-text-size-adjust: 100%;
}

@media (max-width: 319px) { /* Legacy Cell Phone */
    .media :after {
	content: ")";
    }
}

@media (min-width: 320px) { /* iPhone Portrait */
    .media :after {
	content: " 320)";
    }
}

@media (min-width: 480px) { /* iPhone Landscape */
    .media :after {
	content: " 480)";
    }
}

@media (min-width: 768px) { /* iPad Portrait */
    .media :after {
	content: " 768)";
    }
}

@media (min-width: 960px) { /* Tablet Landscape */
    .media :after {
	content: " 960)";
    }
}

この設定で、次のような画面表示になります。確認をする時、Firefoxのレスポンシブモードを使いました。便利です。