読者です 読者をやめる 読者になる 読者になる

ブラウザでボードゲームを作ってみる(Colamone開発ブログ)

ブラウザで遊べる二人零和有限確定完全情報ボードゲーム「Colamone(コラモネ)」の開発記録を淡々と綴るブログです。


ここから遊べます


ColamoneをスマホっぽいUIに変更してみた。

縦長バージョン
f:id:gabill:20150201144800p:plain

横長バージョン
f:id:gabill:20150201144825p:plain

jQueryMobileを使ってスマホっぽいUIにしてみた。これでだいぶボタンも押しやすくなったはず。縦長バージョンでは初期表示でヘルプを折りたたんでいるのですべての要素が画面に収まりスクロールせずにすむ(自分のiPhone5では)。スマホだとタッチしたつもりがスクロールされることがあり選択しづらいのでここ大事。

念願のモバイル対応できた!…と思ったら

Googleのモバイルフレンドリーテストをやると画面が細長くなって潰れてしまう。

Mobile-Friendly Test

f:id:gabill:20150201145510p:plain

同じGoogleのPage Speed insightsのスマホテストでは正しく表示され合格するのに。

PageSpeed Insights

f:id:gabill:20150201145814p:plain

自分の所持してるスマホタブレットではちゃんと表示される。
機種によっては駄目なんだろうか。

うーん。不安だ。

追記(2015/2/9)

単純なバグだった。

500px未満のデバイスでviewportをwidth=device-widthにすると画面がはみ出してしまうという問題があったので、強制的にwidth=500pxにするロジックを組み込んでた。縦も横も。・・・それ故に320x480のような端末ではギュッと縦横縮まる動きになってしまった。縦か横、どっちかは自由にしなきゃ駄目だ。FizzBuzzじゃ駄目だった。