イナヅマTVログ

Memo, [CSS3]iPhone 5専用Media Query

| 1件のコメント

iPhone 5(iOS 6)の地図のできの悪さがネット界隈で話題沸騰中です。
確かに至らぬところは多々ありますが使えない訳でもなさそうなのでこれでもいいかなぁなんて思います。

それよりもショップなどを表すアイコンがApple製品とはとうてい思えないできの悪さの方が気になります。
どうしたんでしょう…

新しいCPUや2倍になったメモリの恩恵は素晴らしいと感じましたし、iOS 6の進化具合もいい感じです。

iPhone 5専用のCSS3 Media Query


画面サイズが変更になったiPhone 5用にCSSを設定したいこともあるかなーなんて考えながらMedia Queryの設定方法をGoogle先生に伺ってみました。

/* for iPhone 5 */
@media only screen and (min-device-width: 640px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
 
}

こっち?
metaと関係してる?

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
/* for iPhone 5 */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
 
}