WEBアプリをスマホ対応に

スポンサーリンク

SMARTPHONEでも見られるように

初めて作ったWEBアプリFrenBullをようやくスマホ対応にしました。

やったことは2つ。

  1. スマートフォン用とPC用のCSS自動読み替え
  2. PHPでスマートフォンかPCかを判別して表示を変える

1.については、CSSファイルにこんな感じで書いています。600pxにしたのは適当。取りあえずスマホの縦も横も対応するにはこんな感じかなと。

2.については、PHPに直接書き込み。以下は閲覧者がスマホかパソコンかを判別する部分。

この後は、判別した情報を使ってifで分岐して表示したいものを変えればOK。元々PC閲覧用に作ったんで、個別画像に遷移した後はInstagramの拡大画像を呼び出して大きく表示してたんですが、それだとスマホの画面に収まらないので、その部分を分岐しています。あとはGoogle Adsenseの表示を変えています。

これで、Instagramを使ったWEBアプリはひとまず完成。あとは多くの人に使ってもらえればなぁ。