最近WEBサイトの制作作業を請け負うと、必ず「スマホでも見れるようにしてね」と言われる。
僕「レスポンシブ対応ですね」と笑顔で返しているが、心の中では「対応しなくてもスマホはPCと同じブラウザを持っとるんじゃボケ！」と性根の腐った事を考えながら、実はそんなに大変ではない作業を大変なように見せたりもします。
ここでいう「スマホで見られる」というのは、「スマートフォンで見た時に見やすい状態になるようにする」という事は、普通に理解できるのだが、WEBエンジニアが大きくCSS派閥とJS派閥に別れるため、どっちが効率的かという議論はハナからするつもりはありません。
ちなみに、僕はどっちかというとJS派閥だけど、CSSの機能は極限まで使いたい派です。
こんな時どうする？
レスポンシブサイトを作った時に、PC表示と、スマホ表示の時にjsの処理が変わるような時、どうやって対応しますか？
スマホ対応というのは、タッチイベント系の処理や、画面が小さい場合の処理になるので、画面サイズを測ってスマホかどうかの判定を行うのが僕が今までやってきたやり方なんですが、
他にもスマホ判定であれば、UserAgentの文字列を判定して、iPhoneやAndroidのマッチで処理する方法もありますが、ここで問題になるのは、スマホアプリに実装されている内部ブラウザと言われるモノが、たまにUserAgentを書き換えて表示しているアプリもあり、そうしたアプリでブラウジングした時に画面が崩れるのは避けたい。
あとは、タッチイベントが使えるかどうかを判定して、スマートフォンかどうかの判定をするという手もあるが、iPadやAndroidのパッドに関しても画面が大きいにも関わらずタッチ処理が存在しているので、やはり画面サイズも判定に必要という事になる。
「cssの@mediaの現在どれが選ばれているか分かればいいのにな〜〜〜。」と思っていたところ、実際にそんな便利な関数がjavascriptに備わっていました。
CSSもMediaクエリ判定
下記のような判定をjavascriptに書く事で、現在どのメディアクエリが選択されているかの判定ができます。
@media (max-width: 767px) {
.nav-wide{
display:none !important;
}
}
@media (min-width: 768px) {
.nav-min{
display:none !important;
}
}
window.matchMedia("(min-width: 768px)");
> matches:true
> media:"(min-width: 768px)"
> onchange:null
任意の要素（element）に対して、"matchMedia"というプロトコルで現在そのクエリが対応していれば、"true"、対応していなければ"false"が返ってきます。
基本的に画面サイズでCSSがどういう状態にあるかを判定する事ができるようになるので、きちんとCSSの記述を管理する事で、javascriptでサイズにあった処理を行う事が可能になります。
でも実際にcssのサイズ情報が書き換わってしまうとjavascriptも修正をしなければいけなくなるので、cssファイルをサーチして、その中のメディアクエリの値で判定するのが効率的かもしれませんが、そうしたライブラリを作っておかなければまあまあめんどくさい処理になります。
残念ながら今回はそうしたライブラリは作っていませんが、実際に作業で作ったらアップしておきますね。
今回は、こんなことできるといいなと思って検索して見つけた機能を書いただけなので、実践で使った事がないので、注意点などはよく理解できてません・・・あしからず。
0 件のコメント:
コメントを投稿