Zynga ViewporterはiOSのMobile Safariでの表示を制御するJavaScriptライブラリです。

iOSのWebブラウザを使って見るサイトを開発する場合に使ってみたいライブラリがZynga Viewporterです。水平、垂直表示を判断したり、表示領域を調整したりするJavaScriptになります。


これはロックモードです。垂直の場合はコンテンツを表示します。


水平にすると表示できませんという表記になります。


こちらは表示領域調整をオンにした場合の縦型表示です。文字が小さくなって全体が表示されます。


こちらはオフにした場合です。文字サイズが大きく表示されます。


水平表示です。こちらは表示領域の調整がオンです。


こちらはオフです。文字が溢れてしまっています。

Zynga Viewporterはその名の通りZyngaが開発しているライブラリになります。ゲームでは縦横切り替えて操作する必要があるので、こういった制御ライブラリが便利に使えるのだと思います。

Zynga ViewporterはMIT Licenseのオープンソース・ソフトウェアです。

MOONGIFTはこう見る

スマートフォン向けのWeb開発はこれまでのデスクトップ向けWeb開発の知識が活かせる一方、スマートフォンに特化した手法を使うことでより利便性の高いWebサイトに仕上げることができます。この点はガラケー独自の仕組みを理解するのとはちょっと違うかも知れません。

アドレスバーを消す仕組みやViewportの操作もそうですし、ホームボタンに配置した時のアイコン表示や、そのアイコンを動的に変えることで通知アイコン風の使い方もできたりします。スマートフォン向けのWeb開発においては特有のライブラリを積極的に使ってみてください。

zynga/viewporter - GitHub