iPhone生活

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

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

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

media="screen and (min-device-width: 481px)">
media="only screen and (max-device-width: 480px)">

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;

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

• 自動校正

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

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

iPhone用CSS適用例

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