HP作成

スマホサイトを作ろう!

アドレスバーを隠す

<body onLoad="window.setTimeout('window.scrollTo(0, 1)', 50);"> 50/1000 sでアドレスバーをスクロールしてみえなくする。

iPhoneでは事実上iframeは使えない

iPhoneでは横幅を何も指定しない場合、横幅980ピクセルまでの領域が、画面上で表示されるように自動的に縮小する。画面サイズに合わせて文字が改行するわけではなく、PCのモニタなどで表示する横幅980pxまでの位置で文字を改行し、それを縮小するという動作をする。

縮小させないなら、

<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">

主流は

標準は

以下のいずれかを採用することで、iPhoneでも本来のように(980ピクセル幅で描画されないように表示させることができます。

ViewPortを記述する
<meta name="viewport" content="width=device-width"/> content属性の値を「width=240」にすれば240ピクセル幅で描画され、カンマ区切りで「user-scalable=no」を追加すれば、ピンチイン/アウトなどのユーザ操作による表示の拡大縮小もできなくなる。

DOCTYPE宣言にXHTML Mobile Profileのものを採用する
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">