loopshoot.comラボ

loopshoot.com開発の記録

WebTitleQuiz | はじめてのiPhone対応

| 0 comments

遅ればせながら、WebTitleQuiz をiPhone対応しました。

ニュースを題材したサイトなので、モバイルと相性がいいです。
隙間時間を「英語」+「ニュースチェック」に使えるようになりました。

技術的な話も少し。

対応のためにやったことを簡単に。
iPhone対応にはいろいろと方法はありますが、WebTitleQuizの場合は、ページの構成がシンプルなので、
iPhone用のページを用意して、iPhoneからのアクセスをそっちに流すように設定しました。

まず、/m/ にiPhone用のディレクトリを作ったので、.htaccessの設定はこうなります。

RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^$ /m/ [L]

さらには、iPhone用のページはページの幅をmeteタグで指定して、

<meta name = "viewport" content = "width = device-width">

幅320pxのデザインにしました。

また、ホーム画面に追加された時用の画像を一応用意しました。

<link rel="apple-touch-icon" href="/apple_touch_icon_wtq.png"/>

あと、テストはsafariのユーザーエージェント変更機能を使います。
さらに、google Analyticsはそのままでいいけど、adsenceはモバイル用に変更する必要がありますね。

loopshoot.comはモバイル対応の流れに遅れてしまいました。
これから他のサイトも急ピッチで対応を進めて行きます。

それではiPhoneからもどうぞ → WebTitleQuiz | 注目ニュースのタイトルを日本語に訳す英語学習サイト


関連記事

  1. 注目ニュースのタイトルを日本語に訳す英語学習サイト WebTitleQuiz リリース!