トップページ > ONEDARI BOYS, iPhone・iPad・iPod, ブログ > ブログをiPhone閲覧用に最適化してますか?
カスタム検索

ブログをiPhone閲覧用に最適化してますか?

iPhone発売から10日、そろそろ機能レビューなども落ち着いてきたところで、ブロガーが見落としがちな大切なこと。



Clip to Evernote


商用サイトなら既に対応済みかと思いますが、一般ブロガーはまだやってない人多数だと思うこと。

前にiPod touchが発売されたときにも書いたのですが、iPhoneのSafariでは横幅がデフォルト980ピクセルとなっており、大抵のブログはキュッと小さく表示されています。

metaタグの「viewport」というのを設定してやると、ちゃんとブログの幅に合った表示にしてくれるので、挑戦してみてください。

以下はこのブログで使っているサンプル
<meta name="viewport" content="width=520; initial-scale=0.61;
maximum-scale=1.0; user-scalable=1;" />

  • width: 横幅
  • height: 高さ
  • initial-scale: 拡大率(1.0以下で縮小)
  • maximum-scale: 拡大率の上限
  • minimum-scale: 拡大率の下限
  • user-scalable: ピンチでの拡大縮小を許すかどうか

試しにONEDARI BOYSのサイトに適用してみました。(他のメンバーにはナイショだよ)

こじんまりしていたトップページは、横幅に合わせて拡大表示
ViewPort1

個別エントリーページは本文エリアだけを画面いっぱいに表示して読みやすく。
ViewPort2
でも横にスクロールさせればサイドバーもちゃんと表示できるよ。

上の例ではSafariのアドレスバーを非表示にするJavaScriptも仕込んでますが、適当にどっかからコピペしてきたのでよく分かってないとうか、なんかゴミ入ってるような気もしないでもないというか、詳しいひと解説プリーズ。

あとですね、iPhone用にCSSを割り当てるということも可能なんですが、フォントサイズ程度であればまだしも、大幅に見た目を変えるとなるとそもそものHTMLの構造から考え直さないといけないので、当分そんなことは手出ししたくないかな。



Clip to Evernote



投稿者 愛場大介(Daisuke AIBA / Jetdaisuke) : 2008年7月21日 00:29

コメント:

このエントリーのトラックバックURL:

このエントリーを参照してないトラックバックは削除する場合があります

» 拡散される推定値 from 【小人閑居シテ駄文記ス】
【元携帯勝手サイト運営者が、実際に使っていた端末IDの使い方とかばらしちゃうよ... [続きを読む]

トラックバック時刻: 2008年7月22日 23:08

» [M] mbdbをiPhone3Gからの閲覧に最適化してみました from [M] mbdb
ジェット☆ダイスケさんが書いていた「ブログをiPhone閲覧用に最適化してますか? - webdog」という記事を見て、サクサクとこのブログもiPhone... [続きを読む]

トラックバック時刻: 2008年7月29日 16:29

Related Posts Plugin for WordPress, Blogger...

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 そしてGoogle Plusはこちらにどうぞ。また、YouTubeのチャンネル登録はこちらからできます。

なんかいいアイテム


ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー

AMN