![[PukiWiki]](image/pesowiki.gif "[PukiWiki]")
[[MenuBar]] スマホサイトを作ろう! * 注意点 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, "> 主流は - 縦向き 320px～640px - 横向き 480px～960px 標準は - 320px(横)/480px(縦) でよい？ ※iPhone4、4Sは640px/960pxの解像度だが、内部解像度で320px/480pxと解釈する。 以下のいずれかを採用することで、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"> * アイコンサイズ タップするには最低44px x 44pxほしい * overflow - ボックスから内容がはみ出した場合の表示方法を指定。 - visible/hidden/scroll/autoの4種類がある。 ** visible overflowプロパティの初期値。ボックスのwidthプロパティとheightプロパティの両方でサイズ指定時ボックスからはみ出した内容も表示する。widthプロパティだけで、heightプロパティを特に指定していない場合は、内容がボックスからはみ出さないように、ボックスは縦に伸張する。 ** hidden ボックスから内容がはみ出た場合、その部分は表示されない。 ** scroll ボックスのサイズは変わらず、要素の縦横にスクロールバーが表示されて、全体が見られるようになる。 ** auto "全体が見られるようにすべきである"という曖昧な指定だけで、実際の挙動はブラウザに任される。 多くのブラウザは、ボックスにheightプロパティを指定していない場合は内容が収まるように要素の高さが自動的に伸張し、一方、widthプロパティとheightプロパティの両方を指定したボックスの場合は、overflow:scroll;と同じようにスクロールバーを出して内容を表示する。
