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

コンパイラかく語りき

import { Fun } from 'programming'

個人サイト作成⑤ 文字サイズとナビゲーション・メニューをスマホ対応

chuckです。

引き続き個人サイトを作成しています。

 

今回は、前回できなかったスマホ対応をしましたのでメモ。

  

できたやつ

f:id:chuck0523:20151013221904p:plain

http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow6.html

※これはスマホ用画面なので、PCからアクセスするとこの画面にはなりません。

 

やったこと

mediaクエリ導入

入れました。Sassで初めて使いました。

adgocoo.com

 

1つ引っかかったのは、入れ子を使っていると、スマホ版のスタイルでも入れ子を使う必要がありました。

それもそのはずで、入れ子だとスタイルの優先順位がグッと上がってしまうんですよね。なので、スマホ版のスタイル指定も、同程度の深さが要求されます。

よくわからない方はこちら。

creator.aainc.co.jp

そうそう、importだけは使いたくないですもんね!いくら個人サイトとはいえ。

 

要素幅の調整

そして、mediaクエリでフォントサイズや要素の幅を微調整しました。

 

調整前がこの通り。

f:id:chuck0523:20151013223452p:plain

この画面はスマホサイズなのですが、もはや文字が見えませんね。

 

固定サイズにしました。

f:id:chuck0523:20151013223535p:plain

 

あと、チャット画面の幅を広げました。

f:id:chuck0523:20151013223613p:plain

当然、左のナビゲーション・メニューが邪魔になってしまいました。

なので、いったんフェードアウトさせて、変わりにボタンを配置しました。

 

f:id:chuck0523:20151013223655p:plain

ハンバーガーアイコン風。(線が1本足りない)

Bootstrapを使おうかとも思いましたが、これだけのために導入するのはためらわれました。

グレーの四角が<div>でして、白い横線が擬似要素になります。( before & after )

chuckwebtips.hatenablog.com

 

そして、アイコンをクリックすると、フェードアウトしていたナビゲーション・メニューが降りてきます。

f:id:chuck0523:20151013223928p:plain

スーッとなめらかに降りてきます。

横幅は画面に対して100%にしました。

 

タッチ座標の取得

あろうことか、今までスマホ版では座標を取得できていませんでした。

 

スマホ版とPCで版では違うみたいですね。以下、手順。

まずwindowオブジェクト(グローバルオブジェクト)に'ontouchstart'があるかどうか調べます。スマホ版ではあるので、trueとなります。

f:id:chuck0523:20151013224342p:plain

 

そして、その結果に応じて、しかるべき方法で値をセットします。

f:id:chuck0523:20151013224511p:plain

スマホ版は処理が長くなります。

 

www.html5rocks.com

 

まとめ

というわけで、スマホ版の対応が終わりました。

 

GitHub

github.com