第２回iAKG会　iPhone上での表示に適した体制に変換するための基本的なテクニック

投稿日：2010/9/27 月曜日更新日：2010/9/28 火曜日

２章

2.1はじめの一歩

PCサイトをiPhoneで表示させて「改善の余地が多いね」って実感するための項。
このページは流し読みでオッケー！

2.1.1iPhone用のスタイルシート

共通HTMLを使ってCSSでiPhone用とPC用を切り替えよう。

media属性のonlyキーワードでスタイルシートを切り替え
IE専用の条件分岐を追加

スタイルシートの切り分け

<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />

メディア機能「max-width」「min-width」とピクセル値の組み合わせでスタイルシートを切り替えるみたい。
でもここで疑問が１つ。iPhone 4の解像度は960×640ピクセルなのでこのやりかたじゃダメなんじゃない！？
と思ったけど、iPhone4もmax-width: 480px)でいけるみたい。

さてこのままだとIEは上記の振り分けを理解しないの、IE専用のスタイルシートも参照するようにする。

IE専用の条件分岐

<!--&#91;if IE&#93;> 
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
<!&#91;endif&#93;-->

2.1.2ページの幅の調整

iPhone用に表示領域を指定してあげます。これをしないと、iPhone版Safariがページの横幅を980pxとみなしてしまいます。

<meta name="viewport" content="user-scalable=no, width=device-width" />

viewpoint指定前

viewpoint指定後

まとめ

今回の勉強会で覚えたのは以下の通りです。

    <head>
        <title>Jonathan Stark</title>
        <meta name="viewport" content="user-scalable=no, width=device-width" />
        <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
        <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
		<!--&#91;if IE&#93;> 
		<link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
		<!&#91;endif&#93;-->
    </head>

今日はここまで。
次回は2.2iPhone向けのCSS

第２回iAKG会 iPhone上での表示に適した体制に変換するための基本的なテクニック

２章