先月Androidタブレット（スマホじゃないがｗ）を購入してから今メインでやってるサイトのスマホ最適化をしたりしているんだが、
違い等をまとめとく。
<スマホでは縮小表示されてしまう>
これはタブレット購入して確認するまでは知らなかったんだが、
スマホ等の小画面端末で普通のWEBサイトを見た場合、自動で縮小表示されてしまう。
縮小表示されちゃうと、テキストリンクとかタッチするの厳しい。
これの回避は簡単で、<head>内に、
<meta name="viewport" content="width=device-width">
って書けば端末サイズで表示されるようになる。
手動ズームの無効化の設定なんかもできるみたいだが、
ズーム出来なくしちゃうと不満に思うユーザーもいるかもしれないし、設定しなくていいんじゃないかと。
ただ、<meta>で設定するなら全ページに設定しなくてはいけないが、
それが厳しい場合は、CSSに
@viewport
で設定できる。
ただし、これは現在のところOperaが
@-o-viewport
で設定出来るだけで他ブラウザは対応していない。
まあ、HTML編集が難しいなら他ブラウザのCSS対応を待つべきと思う。
スマホサイトではタッチ領域を広くするためにリンクをブロックにする感じのサイトがあるが、
まあ、操作しやすいと思うんだが、
PCサイトと共通にする場合はちとめんどいんじゃないかと。
縮小表示の回避だけで、普通のテキストリンクで結構いけると思う。
<メイン領域は幅可変で>
自分の場合は元々固定幅レイアウトは使わなかったので問題ないが、
小画面端末では画面いっぱいに表示したいし、様々なサイズの端末があるから、
固定幅のレイアウトは時代遅れと思う。
<メディアクエリでサイドバーを上部に表示する>
CSS3のMedia Queries便利です。
CSS中に、
@media (max-width:999px){
ここに小画面専用CSSルールを書く。
}
って感じで、端末サイズを限定してCSSルールを書けます。
で、今までのPCサイトはサイドバーを使うことが多かったと思うし、今後もサイドバーは使うと思うが、
サイドバー付きでも小さい端末で表示できるなら問題ないが、メイン領域が狭くなりすぎるようなら、
CSSで小画面時はサイドバーを消すか、float（又はposition）を解除して、メイン領域のmarginを解除。
サイドバーが左にあるなら、float解除でとりあえず普通は上表示になる。
右サイドバーで順番が逆だとちとめんどいかな。
ただ、サイドバーを上にそのまま表示しても縦長すぎるからどうにかしないといけないから、
逆に大画面時では非表示のメニューを上に仕込んでおいて、
サイドバーを消す代わりに表示する感じのほうがいいかもしれん。
PC用のメニューはサイドバーに<ul>とかで作ってたが、
スマホ用作る時は<select>でonchange時にジャンプする感じで作ってる。
<マウス系イベントが発生しない>
これは今でも困ってるんだが、
タッチパネル機はマウスがないからマウス系イベントが発生しない。
といっても、onclickなんかはタッチ時に発生する。
発生しないのは、
onmouseover
onmousemove
等のマウスを押してない状態で発生するイベント。
と、
oncontextmenu
右クリックがないからね。
oncontextmenu
については、Firefoxでは特定要素（aとかinput）では、ロングタップで発生する。
ただ、Firefoxでもoncontextmenuが発生しても、<menu>でのコンテキストメニュー拡張はできない。
うちではコンテキストメニュー拡張してる箇所があるんで、そこで困ってる。
まあ、よく使われるのは、右クリック禁止だと思うが、あれはうざい。
onmouseover
に関しては、もうどうにもならんね。
マウスカーソルがないんだから。
onmousemove
は、押してない状態での移動監視はできないが、
押している状態での監視については、
onmousedown → ontouchstart
onmousemove → ontouchmove
onmouseup → ontouchend
で代用が効く。
タッチ系イベントはマルチタッチに対応しているんで、ちょっと修正が必要になる。