• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

iOS/Webアプリ開発

Mobile Safari

Top / Mobile Safari

• Safari
• WebKit
• ADC

Mobile Safari/バージョン?

Mobile Safari/iOS 14?

• カスタムスクロールバーが使えなくなった

Mobile Safari/iOS 13?

• スクロールバーが非表示に

Mobile Safari/iOS 12.2

• モーションと画面の向きのアクセスがデフォルトオフに（設定->Safari）

Mobile Safari/iOS 8

Mobile Safari/iOS 7

Mobile Safari/iOS 6

Mobile Safari/iOS 5?

Mobile Safari/iOS 4?

制限

• http://wiki.sohaya.com/index.php/MobileSafariの制限
• Safari Web Content GuideのKnow iOS Resource Limits
  • https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

リソースの制限

• デコード後のGIF, PNG, TIFF 2MBまで
• デコード後のJPEG 32MB
• アニメーションGIF? 2MBまで
• Canvas 要素 2MB
• その他リソースファイルはそれぞれ10MBまで

その他制限

• cookieサポート
• Flash, Javaアプレット, SVG(サポートされているようです), XSLTは非サポート
• サードパーティー製のプラグインは非サポート
• JavaScript実行時間 10秒まで (iPhone OS 1.1.4までは5秒）
• マウスオーバーという概念がない
• ファイルアップロード、ダウンロード不可
• カスタムX.509電子証明書使えない

解像度

検索バーとステータスバーを除いた解像度は

• 縦の場合 320×356
• 横の場合 480×208

viewportを指定しない場合は width = 980px に設定される。

対応Web標準

• HTML 4.01
• XHTML 1.0?
• CSS 2.1 and partial CSS3
• ECMAScript3 (JavaScript)
• DOM Level2
• AJAX technologies, including XMLHTTPRequest?
• HTML5

Mobile Safari/イベント処理?

Nitro

• iOS標準のSafariのみでしかNitroは使うことが出来ない

ブックマークレット

• http://www.appps.jp/archives/2135912.html

HTML5

• Application Cache
• Web Storage
  • localStorage
  • sessionStorage
• Web SQL Database
• Geolocation API
• Server-Sent Events
• WebSocket
• Web Workers
• Canvas
• SVG
• CORS

非対応

• Indexed Database API
• WebGL
• File API
• HTML Media Capture

ライブラリ

• UiUIKit (Universal iPhone UI Kit?) - HTMLとCSSのみで構成されたライブラリ
• iUI - JavaScriptでスライドアニメーションなどが実装されている
• iWebKit - Themeが豊富で色々なカラーに変更できる
• jQTouch - iPhone開発に特化したjQueryプラグイン
• WebApp.Net
• Magic Framework

metaタグ

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

linkタグ

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">

inputタグ

• http://blog.fonland.net/2009/12/input-type-iphone.html

• text
• search
• email
• url
• number
• password
• tel

加速度センサとGPS (Geolocation API)

• http://blog.asial.co.jp/788

インラインフレーム?

• iframeの中をスクロールしたい場合は2本指でスクロールする。
• HTMLのbody(背景部分)だけが2本指スクロール対象になるっぽい
• http://www.luigibox.com/00_lab/iframeForiPadSafari/

特殊リンク

• http://wiki.sohaya.com/index.php/特殊リンク処理

デバッグ

• USBでつなぐとMac版Safariのインスペクタが使える。

タブの数

• iPhone:8
  • iOS 6/iPhone 5でも8
• iPad:9
  • iOS 6:24

関連

• iPhone
• iPod touch
• iPad

参考

• http://d.hatena.ne.jp/ntaku/20090913/1252827348
• http://wiki.sohaya.com/index.php/公式ドキュメント類
• http://d.hatena.ne.jp/ntaku/20090913/1252827348

ブックマークレット

• http://d.hatena.ne.jp/zariganitosh/20100606/ipad_bookmarklet