Touch Screen Phone向けサイトへの移植メモ
今回色々変更するにあたって思った事とか。
デザインについて
- 縦スクロールのみ。横スクロールは厳禁。
- サイドバーはなし。多分あんまりいらないし。
- よくクリックするところはテキストリンクではなく、ボタンみたいな大きいヒット判定のあるリンク
- 一番上のナビゲーション
- paginator
- 閾値の切り替え
- 記事のリンクも横方向の空白までヒット判定がある
実装
- 基本的に表示する情報は同じにする
- なので、ロジックの書き換えは行わない。
- テンプレートもなるべく共通パーツを書き換えることくらいに抑える
- ボイラープレート、記事の羅列、paginator、閾値を書き換えたら大体ほとんどのページがよくなったと思う。
- カテゴリとか板関連のはボイラープレートだけ新しくして、中身は同じまま
- 書き直しが必要なページはトップページだけだった
- 2カラムの箇所があるから書き直したくらい
- あとは一部パディングを増やすために、cssでTouch screen版サイトの時だけ有効になるクラスを入れたりした
- 上下にpaddingがあるblockエレメントをで囲んでも、donutだとpadding分にはヒット判定がなかった
- line-heightでやったらうまくいった
- 解像度が高い端末で表示して、最初からズームインした状態で表示してくれなかった
- こういうのが必要っぽい：<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
- TSP/非TSPの判断はethnaのaction formでやってる
- templateのレンダリング自体はViewで行われてるから、普通はこっちでもいいはず
- Controllerを書き換えてSmarty Cacheを調べる作りに書き換えてるから、action formでsmarty cache keyをとれる作りにしたかった
