スマートフォン対応サイトのテストするにあたり、試しに作ってみました。
スマートフォン対応と言うことで、機種判別や OS の判別とかありますが、CSS3 の Media Queries を使って画面サイズから表示を切り替えるという方法を試してみました。
今回は以下の様に、iOS デバイスの画面サイズをベースに判定して表示を切り替えています。
/* PC */
@media screen and (max-width: 1200px) {
.class_name {
}
}
/* iPad Landscape */
@media screen and (max-width: 1024px) {
.class_name {
}
}
/* iPad Portrait */
@media screen and (max-width: 768px) {
.class_name {
}
}
/* iPhone 6 Plus - Landscape */
@media screen and (max-width: 736px) {
.class_name {
}
}
/* iPhone 6 - Landscape */
@media screen and (max-width: 667px) {
.class_name {
}
}
/* iPhone 5 - Landscape */
@media screen and (max-width: 568px) {
.class_name {
}
}
/* iPhone 4 - Landscape */
@media screen and (max-width: 480px) {
.class_name {
}
}
/* iPhone 6 Plus - Portrait */
@media screen and (max-width: 414px) {
.class_name {
}
}
/* iPhone 6 - Portrait */
@media screen and (max-width: 375px) {
.class_name {
}
}
/* iPhone 3.5, 4inch - Portrait */
@media screen and (max-width: 320px) {
.class_name {
}
}
PC のブラウザでウィンドウズサイズを伸縮すると、表示がちょこまかと切り替わりますが、あまりウィンドウズサイズを変更するというのを考えてはいないので、うまく表示が変わらなくてもいいかなと。
iOS デバイスで、Portrait、Landscape それぞれに持ち替えると表示は上手く変更されると思います。
CSS3 の Media Queries を使うってのは、特にプログラムを組む必要もないし、思ったよりも便利かも。前に php であれやこれやとやったのが何だったのかと。難点は、先に書いた様に PC でウィンドウズサイズを変更すると、それにも適用されてしまうというあたりかな。
「likr」は、LINE クリエイターズスタンプと Amazon の書籍を紹介するアフィリエイト系のサイトです。
書籍は、よく本を読むので、その辺りをチョロチョロと追加していくと思います。スタンプは、独断と偏見で、その時その時に目についた、気になったスタンプを掲載していく方向です。
