iPhone Android など、スマートフォン向けhtmlコーディング/CSS 1 Comment
iPhone / iPod touch の画面サイズへの調整
画面サイズ：320x480px（Safariの表示領域は320×356ｐｘ）
横幅980pxまでのサイトは自動で320まで縮小する
iPhone向けサイトを作成する場合は、meta name=”viewport”を指定すると、iPhoneでの最初の表示サイズ等を指定できます。
1 | <meta name="viewport" content="width=320, "> |
例えば上記のように書いた場合、横幅320ピクセル分までの領域をiPhoneの画面上に表示する事になります。
横幅を何も指定しない場合、横幅980ピクセルまでの領域が、画面上で表示されるように自動的に縮小します。
※iPhoneでは画面サイズに合わせて文字が改行するわけではなく、PCのモニタなどで表示する横幅980pxまでの位置で文字を改行し、それを縮小するという動作をするので、initial-scale=1.0は指定しておいた方がよいでしょう。
その他の記述例は下記の通りです。
1 | <meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, "> |
| width , height | 最初に読み込まれた際の表示サイズ(px)を数字で指定します。 端末の画面サイズにあわせる場合は 『device-width』と記述します。 widthは何も指定しないと横幅980ピクセルになります。 |
|---|---|
| initial-scale | 最初に読み込まれた際の拡大率 |
| user-scalable | ユーザーが拡大（pinch in ／ pinch out）できるか否かを、yesかnoで設定 |
| maximum-scale | ユーザーが操作可能な拡大率の上限 |
| minimum-scale | ユーザーが操作可能な拡大率の下限 |
PC版とiPhone等スマートフォン版向けに別々のCSSを適応させる場合
PC版とiPhone等スマートフォン版向けに別々のCSSを適応させる場合はmedia query （CSS3 から導入される Media Type を大幅に拡張する仕様）を使います。
PC版CSS ・・・ pc.css
スマートフォン版CSS ・・・ smart.css
記述例
1 2 3 4 5 | <link media="only screen and (max-device-width:480px)" href="smart.css" type="text/css" rel="stylesheet" /> <link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet" /> <!--[if IE]> <link href="pc.css" type="text/css" rel="stylesheet" /> <![endif]--> |
端末の横幅最大値が480pxまでの場合は smart.css を読み込み、481px以上の場合は pc.css を読み込むという具合になります。
ちなみにスマートフォンの横幅ですが、iPhoneで言えば縦の状態では横幅320ですが、端末を横にすると横幅も広がる事になるので320よりも大きい値に設定しておく事になります。
※Xperiaでは端末を横にした場合の画面サイズが854pxなので、PC向けのCSSは855px以上の時に読み込む設定しないと、端末を横に向けて再読み込みするとPC版のレイアウトで表示されるという現象が発生するので注意が必要です。
※iPadの画面解像度は1024×768なので、iPadで見た場合にスマートフォン向けのCSSが表示されるという事もあるので、いい振り分け方法があればアドバイスいただけると助かります。
上記ソースでIE向けの条件分岐は、IE7以前はmedia queryに対応していない為です。
iPhoneでは事実上iframeは使えない
iPhoneでインラインフレームを使うと、インラインフレームでのスクロールバーが表示されないので基本的に使用するべきではありません。
そもそもiframe自体が非推奨ですから使わない方が良いですね。
