iPhone生活

iPhone用のスタイルシートを別途用意する場合

下記のようにall.cssというスクリーン用のスタイルシートを、

<link href="all.css" rel="stylesheet" type="text/css" media="screen">

pc.cssとiphone.cssに分けて下記のように設定することで、iPhone用のhtmlを作らずにiPhone用のレイアウトを用意することが出来ます。

<link href="pc.css" rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)">
<link href="iphone.css" rel="stylesheet" type= "text/css" media="only screen and (max-device-width: 480px)">
<!--[if IE]>
<link href="pc.css" rel="stylesheet" type="text/css" />
<![endif]-->

if IEの部分は、IEがmedia="screen and "を読み込めないため、IE用に再度外部CSSを宣言しています。

既存のスタイルシート内にiPhone用のスタイルを追加する

一方、外部スタイルシートを分けずに、またはhtml内にスタイルを宣言している場合にそれを生かしてiPhone用のスタイルを宣言することが出来ます。

p.text {
	width: 780px;
	font-size: 80%;
}

上記の内容を下記のように追記して書き換えます。

p.text {
	width: 780px;
	font-size: 80%;
}
@media screen and (max-device-width: 480px) {
	p.text {
		width: 480px;
		font-size: 110%;
	}
}

iPhone独自使用のCSS/HTMLを使用する

• 自動フォントサイズ調整を設定する

  -webkit-text-size-adjust: (100% | none | auto);

• タップ時の色を変更する

  -webkit-tap-highlight-color: #000;

• 電話番号の自動リンク機能を設定する

  <meta name="format-detection" content="telephone=no">

• 自動校正

  <input type ="text" autocorrect="on">

• 自動大文字化（英文の1文字目）

  <input type ="text" autocapitalize="on">

-webkit-text-size-adjustはデフォルトでautoのため、iPhone用のCSSを作成する際には、 これをコントロールして判読しやすい文字サイズに設定する必要があります。

iPhone用CSS適用例

当サイトでは、全ページにiPhone用のCSS設定を施しています。例えばこのページはiPhone上では左記のようなレイアウトになります。