iPhone対応
筆者が運営している格闘ゲームのファンサイトで、久々の更新をしました。
iPhone対応です。
身近にiPhoneユーザーがいないのでiPod touchでの動作確認ですが。
多分Androidでも同じように見えているはず…。
基本的にはヘッダにviewportとやら（多分、ズームイン・アウトとかのこと）を禁止するコードを追加して、解像度が低いもの（iPhone）とそれ以外とでCSSを別に読ませるように（このとき、IEは特殊対応が必要）するだけ。
そしたら、iPhoneに見せたくない要素（巨大な画像やFlashなど）は「display:none」で隠すなど、CSSでデザインを調整します。
ただ、ちゃんとCSSを実装していないサイトだと苦労します。
いや、しました。
というか（もともと見栄えのいいサイトではないとはいえ）今は暫定対応に近いので、iPhoneでは「バッチリ」というほどでもなく、PCでは一部レイアウトが崩れています。
CSSって難しい…。
[追記110218]
昨日は携帯からだったので書けませんでしたが、実際のコードを追記しました。
iPhone対応です。
身近にiPhoneユーザーがいないのでiPod touchでの動作確認ですが。
多分Androidでも同じように見えているはず…。
基本的にはヘッダにviewportとやら（多分、ズームイン・アウトとかのこと）を禁止するコードを追加して、解像度が低いもの（iPhone）とそれ以外とでCSSを別に読ませるように（このとき、IEは特殊対応が必要）するだけ。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<link media="only screen and (min-device-width:481px)" type="text/css" rel="stylesheet" href="style.css" />
<link media="only screen and (max-device-width:480px)" type="text/css" rel="stylesheet" href="style_ip.css" />
<!--[if IE]><link href="style.css" type="text/css" rel="stylesheet" /><![endif]-->そしたら、iPhoneに見せたくない要素（巨大な画像やFlashなど）は「display:none」で隠すなど、CSSでデザインを調整します。
ただ、ちゃんとCSSを実装していないサイトだと苦労します。
いや、しました。
というか（もともと見栄えのいいサイトではないとはいえ）今は暫定対応に近いので、iPhoneでは「バッチリ」というほどでもなく、PCでは一部レイアウトが崩れています。
CSSって難しい…。
広告
昨日は携帯からだったので書けませんでしたが、実際のコードを追記しました。
広告
