スタッフのつぶやき

JavaScript でレスポンシブ対応に挑戦してみた。

  • このエントリーをはてなブックマークに追加

こんにちは。

制作部の山口です。

あと2日で12月です。他の月と同じ1ヶ月間なのに、この月だけは毎年あっという間に過ぎてしまうので、もうなんだか気持ちだけが毎日ソワソワしています。

先日会社から出た課題の中で、Javascriptのレスポンシブ対応を挑戦しました。

それはこんなソースです。

<script>
if(navigator.userAgent.indexOf(‘iPhone’) > 0 || navigator.userAgent.indexOf(‘iPod’) > 0 || (navigator.userAgent.indexOf(‘Android’) > 0 && navigator.userAgent.indexOf(‘Mobile’) > 0)){
// スマホ時に行う処理を書く
} else {
// PC・タブレット時に行う処理を書く
}
</script>

わからないなりにご説明します。
indexOfメソッドは、指定された文字列が現在の文字列に登場する位置を0以上の値で返します。(含まれていない場合には-1を返します。)

今回のソースでは
navigator.userAgent.indexOf(‘iPhone’) > 0 ←iPhoneである
|| ←または
navigator.userAgent.indexOf(‘iPod’) > 0 ←iPodである
|| ←または
navigator.userAgent.indexOf(‘Android’) > 0 && navigator.userAgent.indexOf(‘Mobile’) > 0 ←Androidである時に

// スマホ時に行う処理を書く

} else { ←それ以外の時に

// PC・タブレット時に行う処理を書く

という感じの意味です。

iPhoneやiPodのように、navigator.userAgent.indexOf(‘Android’) > 0 だけだと、Android総称になり、Androidタブレットも含まれるため
navigator.userAgent.indexOf(‘Android’) > 0 && navigator.userAgent.indexOf(‘Mobile’) > 0 となります。
私は、まだ初心者なので、こうして一単語ずつ調べて、ソースの意味を少しずつ理解しています。これからも頑張ろう・・!

  • このエントリーをはてなブックマークに追加

【Webデザイナー募集!】D-Gripで一緒に働きませんか?

ただいま株式会社D-Gripシステムでは、制作部として一緒に働いてくれるWebデザイナーさんを募集しています。

実務経験がある方はもちろん、専門学校や独学で勉強された未経験の方でも歓迎です!
800サイト以上の運営実績のある会社で、プロのWEBデザイナーへの道を着実に歩んでいきませんか?

お問い合わせはコチラから↓
採用サイトへ

お電話はコチラから↓
TEL:03-5363-2191

採用サイトへ