Photo by: Yanki01
つい先日終わりました。スマホ版和洋風KAIのiPhone 6 / 6 Plus対応。
ホンの一部ですが、iPhone 6 / 6 Plusにのみスタイルシートを効かせたい部分があったのですが、無事適用出来たのでメモしておきます。
iPhone 6 / 6 Plusにのみ効かせるスタイルシートの書き方。
iPhone 6の画面サイズは375x667、iPhone 6 Plusは414x736というサイズになっていますので、この横幅サイズをフックにしてスタイルシートをかければよいわけです。
testというクラスのimgタグにスタイルシートをかける場合、このように書いたら無事適用させることができました。↓↓
@media(min-width: 375px) { .test img { width: 170px; }}
@media(min-width: 414px) { .test img { width: 180px; }}
うーん。@mediaはやっぱり便利・・・！
あとがき
本当は、iPhone 6 / 6 Plus限定という書き方ではなく、あらゆる画面に反応できるスタイルシートを書くのが一番だと思いますが、どうしてもそれでは追いつかない部分が出てきたときはぜひ参考にしてみてください。
