iPhone5発売ついでにWebサイト屋用のメモ

めもめも。
アプリ屋さんとか本職Web屋さんには意味のないメモ。

解像度とか

iPhone3G/3GS（iPhone）

• 解像度：320x480[px]
• デバイスピクセル比：1
• CSSピクセル：320x480[px]

iPhone4/4S（iPhone Retina 3.5inch）

• 解像度：640x960[px]
• デバイスピクセル比：2
• CSSピクセル：320x480[px]

iPhone5（iPhone Retina 4inch）

• 解像度：640x1136[px]
• デバイスピクセル比：2
• CSSピクセル：320x568[px]

画面の向きがPortraitなら上記解像度だけど，Landscapeなら縦横逆です。

判別

UAではiOS(iPhoneOS)のバージョンしか分からない。

参考
（後半省略）（マイナーバージョンは適当にピックアップ）

• iPhoneOS：Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en)(略)
• iPhoneOS2：Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_1 like Mac OS X; ja-jp)(略)
• iPhoneOS3：Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_3 like Mac OS X; ja-jp)(略)
• iPhoneOS4：Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_5 like Mac OS X; ja-jp)(略)
• iOS5：Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) (略)
• iOS6：Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X)(略)

iPhone;の部分がiPod;とかiPad;とかなったりするよ。 （cf. userAgent一覧/ユーザーエージェント一覧等）

というわけで，解像度で判定が必要。JSなら

window.screen.height==568

で，CSSなら

@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2)

といったところ。（cf. iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more | Breaking the Mobile Web，HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ | WWW WATCH）

とりあえず

orientationがLandscapeとかPortraitとか関係なくて，AndroidやWindows Phoneの全機種対応とかどうでもよくて，単純にテキトーにPCとは別のCSSを適用させたいなら，

@import url(hogehoge.css) sreen and (max-width:568px)

とかになるのかな。多分いままでは480とかだったのを568にしちゃえ的な。max-widthは適宜max-device-widthとかにしてもいいと思う。orientation使って，がっつり別デザインも素敵かと。

それにしても

JavaScript実行20％向上は凄いですね。レンダリングも早いですね。JavaScriptで少々無茶をしてもいい気がしてきました。

その他気になったこと

• 画像がアップロードできるようになった（&ltinput type="file">）
• CSS3 -webkit-filterきた
• リモート Web インスペクタ

ネタ元：iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more | Breaking the Mobile Web，HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ | WWW WATCH，iPhone5 と iOS6 での HTML5開発についてあれこれ - webとかmacとかやってみようか R