mobilexweb.com
出典・引用はグレートな上記記事から。
各項目について詳細ある場合はブランチ作るかもしれません。
ONO TAKEHIKO
wants to talk about
iPhone 5, iPod Touch（第5世代）のスクリーンサイズは
WDVGA (Wide Double VGA) 640×1136ピクセル。
デバイス検出・判別方法
– User Agent
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25
– JavaScript
var isPhone4inches = (window.screen.height==568);
– CSS (media queries)
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5, iPod touch（第5世代）用のスタイル */
}
【ネイティブappのスタートアップスクリーンサイズ】
– 640×1136ピクセル, PNG
– ファイル名を “Default-568h@2x.png” に？
【File API】
– 単一ファイル <input type="file">
– 複数ファイル <input type="file" multiple>
でオプションペインが現れ、
写真またはビデオの撮影またはカメラロールを指定できる。
– ファイル送信
action による multipart POST またはAjax。
Ajaxの場合プログレスもサポート。
– accept属性で画像か動画の指定が可能。
<input type=file accept="video/*">
<input type=file accept="image/*">
※PDFなどオーディオなど他のファイル形式は未サポートの模様。
【WEB AUDIO API】
【スマート App バナー】
<meta name="apple-itunes-app" content="app-id=9999999">
HTMLに上記を指定するだけで、ネイティブアプリを開くあるいはインストールを促すバナーUIが表示される。
app-argumentの受け渡しや、iTunes Affiliate Programによるアフィリエイトの埋め込みも可能。
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">
【CSS3 Filters】
-webkit-filter による blur, brightness, saturate など
各種画像エフェクトの適用が可能に。
【CSS クロスフェード】
-webkit-cross-fade をサポート。
background: -webkit-cross-fade(url(first.png), url(second.png), 50%);
の書式で、2枚の画像のクロスフェードを指定可能。
@-webkit-keyframes との組み合わせでアニメーションも可能。
Safariでフルスクリーンモードをサポート。
【Animation Timing API】
“requestAnimationFrame” をサポート。
setInterval を使ったJSアニメーションの代替に。
※JSによる制御と違い、タブが隠れていてもパフォーマンスが落ちないらしい。安定的に動作するが、CPU, GPU, メモリ等のリソースを食うためバッテリへの影響に注意が必要とのこと。
【CSS Image Set】
-webkit-image-set() のサポート。media queriesによる場合分けをせずとも
background: -webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x);
で標準画像, Retina画像の指定が可能に。
【Passbook連携】
WebサイトからPassbookのPassを配信。
Passの中身はJSONメタデータ。
【Storage API】
– キャッシュ容量が25MBまで拡大。
– Chromeless Webapp は独自Sandboxを持つようになった。
Chromeless Webappのホームスクリーン登録時のタイトルを指定可能に。
<meta name="apple-mobile-web-app-title" content="My App Name">
【リモートデバッグ】
デバイスをMacに接続することで、Mobile Safariで表示させているページを、MacのWeb Inspectorから参照することが可能に。
【JavaScript高速化】
– JavaSctiptエンジンがiOS 5.1比で20%高速化。
※Web ViewにおけるJavaScriptは相変わらずSafariでの実行時に比べ、あくまでSunspide上での計測だが3.3倍近く遅い。
【XMLHttpRequestProgressEvent】
Ajaxにおけるデータの送受信状況が確認可能に。
【-webkit-transform: preserve-3d ハックが無効化】
-webkit-transform: preserve-3d の指定により、ハードウェアアクセラレーションが可能になるハックがあったが、これが無効化された。
ハードウェアアクセラレーションを目的に preserve-3d を使うべきではなくなった。
【HTML5 <keygen> 要素のサポート】
Safariから公開鍵・秘密鍵の生成と送信が可能に。
【Canvasに高解像度画像ハンドリング用メソッドが追加】
getImageData, putImageDataに加え、
高解像度画像ハンドリング用の
webkitGetImageDataHD と webkitPutImageDataHD が出来た。
※出来たてホヤホヤのせいか、あまり詳しく分かりやすいリソースが見つからなかった。
whatwg.org
【iOS6でまだ非対応のもの】
– IndexedDB
– FileSystem API
– Performance Timing API
– WebRTC and getUserMedia
– WebGL -still there and still disabled-
– Orientation Lock API for gaming/inmersive apps
– Integration with Facebook and Twitter Accounts native APIs
↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑
ここまではほぼ Max Firtman さんによる記事 “iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more” が出展。
【SafariにおけるJPEGのダウンサンプリングが起こる条件が変更に】
これまでMobile Safari上で大きな画像を表示させようとした場合、自動的に200万画素にダウンサンプリングされてしまっていたが、これが500万画素まではOKになった模様。
【-webkit-flexboxの廃止】
-webkit-box か -webkit-inline-box に要書き換え。
【WebサイトへのYouTubeプレーヤ埋め込みの仕様変更】
これまで <iframe src="youtube.com /> でも埋め込み出来てしまっていたらしいのですが、iOS 6のSafariでは機能しないそうです。
Google先生がアナウンスしている正しい埋め込みURL youtube.com を用いる。
【Chromeless Webappのスタートアップスクリーン指定】
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<link rel="apple-touch-startup-image" href="images/ios_startup.png">
<link rel="apple-touch-startup-image" href="images/ios_startup@2x.png" sizes="640x920">
<link rel="apple-touch-startup-image" href="images/ios_startup_large@2x.png" sizes="640x1096">
3種類必要になった。やれやれ。
