ページを読み込んだ時の画面幅でtableの表示方法を変える。
768px以上なら普通にtableで表示。768以下の場合はタグをdivに置き換えて、リストっぽい表示にする。

cssだけでとか、色々な方法があるけれど、軽量でシンプルな方法を探していて、Design Spiceさんの下記のページの「jQueryでタグを書き換える」方法に。1ページに複数のtableがあるページがあったので、ちょっとjsをアレンジした。

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice
http://design-spice.com/2012/11/01/responsive-table/

※ページを読み込んだ時の画面幅なので、読み込んだ後に画面サイズを縮小しても変化しない。ま、タブレットやスマホで画面サイズをグリグリ動かせるわけじゃないのでOK。

htmlはこんな感じ。tableタグのclassに「responsive_table」を指定する。

jQueryと一緒に使用する。tableの各タグの置換えは、ページ全体の構造や好みで変えれば良いと思う。

スタイルシート。

スポンサードリンク

画面サイズによる、画像の切り替え。

色々使ってきたけれど、「BlackFlag」さんのやり方が使いやすい。ありがたい。

jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験 | BlackFlag
http://black-flag.net/jquery/20120808-4047.html

1.小さい画面ように「photo01_sp.jpg」、大きい画面ように「photo01_pc.jpg」を準備しておく

2.以下のスクリプトを記述。(外部ファイルにして読み込んでもOK)

3.classに「switch」を指定。(上記のscriptで指定したclass)

スポンサードリンク

幅をスマートフォンの画面にフィットさせる

ユーザーが拡大縮小できます。
最近、視力が若干落ちてきたので、たまに拡大できないサイトがあるとイラッとします。
自分が該当する立場になってみると、やはりアクセシビリティは大切だねって思うね。

文字のサイズを自動で拡大させない。

これはいつもじゃないけれど、デザインによっては必要な時がある。
100%をnoneにしても文字は拡大されないが、レスポンシブなどPCと共通にしている場合、PC のブラウザのバージョンによっては、拡大した時に文字が拡大されずアクセシビリティ(使いやすさ)が低下することがあるので避ける。

スポンサードリンク