iPhone対応サイトを作るためのメモ

いよいよiPhoneの発売が明日になりました。なんか世間はいよいよあわただしくなってきましたね。かくゆう自分は買う予定はありません。w

そんな中、マイネット・ジャパンのサイトもiPhone対応になりました
iPhoneで http://mynet.co.jp/ にアクセスするとこんなページが表示されます!
ここからどんな動きをするかは実際にアクセスしてみてのお楽しみで!首尾よくiPhoneを手に入れられた方はゼヒおためしください。

 

 

以下、iPhone向けのwebページを作るときのメモ。

一般のPC向けサイトが表示できるのでたいていのhtmlタグは使えるわけですが、大事なのはビューポートの設定です。iPhoneでページを見たときのデフォルトでは、横幅980pxであるという前提で縮小表示されてしまいます。なので普通に作ったページは文字も読めないくらい小さく表示されてしまう。

これを回避するには、headタグのなかに下記のようなmetaタグを書くとよいです。

<meta name="viewport" content="width=300">

↑こう書くと、横幅300pxという指定で初期表示されますので、任意の見やすい大きさを指定するのが吉です。

 

ほか、詳細は下記のリンク先をご参照。

 

http://www.atmarkit.co.jp/fwcr/special/iphone/01.html
iPhone向けサイトを作るための入門記事。
Mac版Safariとの違い、使える技術使えない技術、デザインレイアウト設計方針、など。

http://searchblog.yahoo.co.jp/2008/06/yahoo_iphone.html
iPhone対応にやたら力を入れているYahoo!Japanのブログから。iPhone UIライブラリの紹介記事。

http://labs.unoh.net/2007/10/iphoneipod_touch.html
ウノウラボにいいまとめがあります。

http://arigato-ipod.com/iphone/
「iPhone概論」

http://www.ideaxidea.com/archives/2008/06/iphoneyahoo_design_stencil_kit.html
UI部品の画像集。pptなどで絵コンテ作るときに重宝しそう。

 



« モバゲーのマキです | メイン | Googleモバイル検索に日本語ドメインが出現 »

トラックバック

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

コメントを投稿

about

平島浩一郎
株式会社マイネット・ジャパン



終電jp
まとめてブログ検索
あわせて読みたい

Powered by Movable Type
株式会社マイネット・ジャパン