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 WebHTML5 開発者向け 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 WebHTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ | WWW WATCHiPhone5 と iOS6 での HTML5開発についてあれこれ - webとかmacとかやってみようか R

コメント

このブログの人気の投稿

ソフトバンク光BBユニットのセキュリティと、Wi-Fiルーターのファイアウォールをちゃんと確認した

懐かしのミニ四駆たちがでてきました。

Twitter=>discord連携の際に、複数行のテキストを取り出す場合はIFTTTじゃなくてZapierを使うといい