ピンチイン・ピンチアウトに対応しました

スマートフォンなどに向けピンチイン・ピンチアウトに対応しました。
そのままでやってみてください。2倍まで拡大します。
iPhone(Safari、Chrome)とAndroidタブレット(Chrome)で確認しています。

実は、系統図を再建している途上でして、それで気がついたのですが、(当サイトにおける)lightboxはどうもスマートフォンでは扱いづらい。
でかすぎる。今はタッチで拡大しない。という問題。
旧サイトはスマートフォン向け表示でピンチイン・ピンチアウトに対応していましたけど、それではなく、目的は図の見やすさなのです。

そこで系統図だけをタッチ操作で拡大できるようにすることを模索したんですが、断念。
D3.jsを利用したものなのですが、なんと一番上のサイトロゴが動いてしまうというお笑いに。
おそらく図の部分を別に呼び出すような形にしてどうのってことなんでしょうが、そもそもD3.js自体もう少し日本語の指南がないと(運営者には)難しい。

というわけで無難な策としてサイト全体が2倍になる方法にしました。

  • ピンチアウト→拡大
  • ピンチイン→縮小
  • 拡大時にダブルタップ→元のサイズに戻る(iPhone)

lightboxも併用しますが、系統図はそのままピンチアウト(拡大)で読めると思います。