Fork
edit= iPhone/iPod touchむけメモ
* iPhone は、電話番号のように見える番号を自動的に検知し、ユーザーがその番号をタップして電話を掛けられるようにしています (iPod の場合、このような自動検知は行いません)。ページ上でこの機能をオフにするには、{{{<meta name = "format-detection" content = "telephone=no">}}}というメタタグを使用します。この機能をオフにした場合、電話番号を{{{<a href="tel:555-1234">555-1234</a>}}}という形式の HTML リンクに変換することで、該当する電話番号を明示的に識別することができます。
* Google Maps のページにリンクすると、Mobile Safari が終了して Google Maps アプリケーションが起動されます。同様に、YouTube ページにリンクすると YouTube アプリケーションが起動されます。
* JavaScript 関数の alert、confirm、prompt は iPhone で有効に機能しますが、showModalDialog は機能しません。iUIでは、dialog という CSS クラスがダイアログの振る舞いを模倣して、画面最前面のオーバーレイとして機能します。
* 現時点では、Flash、Java™ アプリケーション、WML (Wireless Markup Language)、SVG (Scalable Vector Graphics)、XSLT (Extensible Stylesheet Language Transformation) はいずれも Mobile Safari ブラウザーで機能しません。ファイルのアップロードとダウンロードはサポートされていませんが、iPhone ファームウェアの 2.0 バージョンでは違ってくる可能性があります。マウスオーバー・イベント、ツールチップ、およびホバー・スタイルも同じく機能しません。
* GIF (Graphics Interchange Format)、PNG (Portable Network Graphics)、TIFF (Tagged Image File Format) の画像は、デコードしたときに 2 メガピクセル以下でなければなりません。2 メガピクセルを超える JPEG 画像はサブサンプリングされて小さくなるので、最大 32 メガピクセルが限度です。個々のテキスト・ファイルやメディア・ファイルは、10 MB 未満でなければなりません。
* iPhone と iPod touch ではどちらも、ユーザーが特定の Web アプリケーションを表すアイコンをホーム画面に配置することができます。アプリケーションにカスタム・アイコンを指定するには、PNG ファイルを {{{/apple-touch-icon.png}}} に配置します。アイコンは、角が直角の 57 x 57 ピクセルにする必要があります。ネイティブ・アイコンが使用する光沢は含めないようにしてください。iPhone または iPod-touch のオペレーティング・システムが、自動的に角を丸くして光沢エフェクトを追加します。
* http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites
* iPhoneとiPodをJavaScriptで判定
{{{
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.espn.go.com/wireless/?iphone&;i=COMR";
}
}
}}}
* Set iPhone width as the viewport
{{{
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
}}}
* Insert an iPhone specific icon
{{{
<rel="apple-touch-icon" href="images/template/engage.png"/>
}}}
* Prevent Safari from adjusting text size on rotate
{{{
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
}}}
* Detect iPhone orientation
{{{
window.onload = function initialLoad() {
updateOrientation();
}
function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case 0:
contentType += "normal";
break;
case -90:
contentType += "right";
break;
case 90:
contentType += "left";
break;
case 180:
contentType += "flipped";
break;
}
document.getElementById("page_wrapper").setAttribute("class", contentType);
}
}}}
* Apply CSS styles to iPhones/iPods only
{{{
@media screen and (max-device-width: 480px){
/* All iPhone only CSS goes here */
}
}}}
* Automatically re-size images for iPhones
{{{
@media screen and (max-device-width: 480px){
img{
max-width:100%;
height:auto;
}
}
}}}
* Hide toolbar by default
{{{
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
}}}
* SMSリンク
{{{
<a href="sms:12345678900">Send me a text</a>
}}}
* 「:hover」もどき: iPhoneはマウスないけど、こうすれば指先がリンクに乗ったら色が変わるとかできる
{{{
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}
}}}
{{{
a:hover, a.hover {
/* whatever your hover effect is */
}
}}}
* 上記では:hoverをエミュレートしてリンクの色を変える方法を紹介してるが、iPhoneだけを考えるなら、タップされたところをハイライトするようなCSS attributeが用意されているので、それを使ったほうがいい
{{{
* {
-webkit-tap-highlight-color: rgba(160,160,160,0.70);
}
}}}
* ホーム画面のアイコンから起動されたかどうかを検知: Google Buzzや、リニューアルしたiPhoneむけYahoo! Japanでは、Safariでアクセスしたとき「キミもこのページをアイコンとしてホーム画面に置かないかい?」という誘導がでる。もちろんこの誘導はホーム画面のアイコンから起動したときは出ない。つまりホーム画面のアイコンから起動したかどうかの検出が必要。それはこう書けばできる
{{{
<head>〜</head>に以下を入れておいて、
<meta name="apple-mobile-web-app-capable" content="yes" />
}}}
{{{
<script language="JavaScript">
if(window.navigator.standalone){
document.write('ホーム画面のアイコン経由だね');
}else{
document.write('普通にSafariでアクセスしたね');
}
</script>
}}}
* iPhoneを含むWebKit系のブラウザでは CSS アニメーションがサポートされていて便利なのではあるが、iPhoneの場合は3D系のアニメーションとフォームの入力動作と相性がわるいようなので、ユーザビリティを考慮した場合利用には若干の注意が必要。具体的には、3D系アニメーションを利用するために以下のようなエントリをCSSに追加すると、このようなアトリビュートが有効になったページにあるインプットフォームへの入力は体感でわかる程度にレスポンスがわるくなる。
{{{
body {
-webkit-transform-style: preserve-3d;
}
}}}
* 動的なWebサイトなど、同一URLで多様なコンテンツを提供するサイトの場合、Safariのブラウザバックで前の画面に戻ったとき、<input type='submit'> の value が前の画面のままになっていることがある。たとえば foo.cgiで <input type='submit' value='投稿する'> で同じく foo.cgi にPOSTで遷移して、遷移先の foo.cgi に <input type='submit' value='取り消す'> が含まれていた場合、ブラウザバックすると「投稿する」ボタンが現れるべきだが「取り消す」ボタンとして見えてしまう。