２章
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専用の条件分岐
<!--[if IE]> <link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> <![endif]-->
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)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" media="all" />
<![endif]-->
</head>
今日はここまで。
次回は2.2iPhone向けのCSS