Strings of Life

PHP/Phalcon/MySQL/JavaScript/RegExp/Ruby/Perl/ActionScript

タグ:iPhone

<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8" />
<title></title> ←文字コードより後に配置すること。
<meta name="format-detection" content="telephone=no" /> ←電話番号認識の無効化
<link rel="apple-touch-icon" href="img/home.png" /> ←ホーム画面用アイコンの指定
<link rel="stylesheet" href="css/iphone.css" media="screen" /> ←スマートフォン向けのmedia属性

※ホーム画面用のアイコンは、114x114以上のPNG画像。ホーム画面の角丸と光沢はiPhoneが自動でつけるので、アイコンに大して角丸・光沢をつける必要はない。
(自動での装飾をさせたくない場合、<link rel="apple-touch-icoun-precomposed" href="img/home.pmg" />と書く。ただし、角丸は必ず適用される)


参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

<head>
<script>
if(navigator.userAgent.indexOf('iPhone') != -1) {
    location.href="http://www.hogehoge.com/iphone/";
}
</script>
</head>

↑のコードをデスクトップ向けトップページ(index.html)のhead要素内に記述しておくと、iPhoneから「http://www.hogehoge.com/」にアクセスした時に、「http://www.hogehoge.com/iphone/」に自動転送される。


参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

・ファイルのアップロード/ダウンロードができない
・「マウスオーバー」の表現ができない
・Flash等のプラグインに対応していない
・フレーム表現ができない
・日本語フォントは1つだけ


参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

・ページサイズは横幅320pxを基準に設計
・文字サイズは14~16px、行間は1.4~1.6
・ページの左右には10pxの余白を作る
・ナビゲーションリンクの縦幅は44px前後

参考:iOSヒューマン インターフェイス ガイドライン(pdf)

参考書籍:HTML5+CSS3で作る  魅せるiPhoneサイト  iPhone/iPad/iPod touch対応
HTML5+CSS3で作る 魅せるiPhoneサイト

このページのトップヘ