サイトのデザインをしていて、スマホでの見え方を確認したいとき 一番確実なのは、スマホで見てみれば良いわけですが(笑) しかし、スマホと言ってもAndroidとiOSがあるわけで、また機種によって画面のサイズも違っていますので・・・ 自分が持っている端末環境での確認しかできませんが。 実はPC上のブラウザから各種スマホ・タブレットからの見え方を簡単に確認できます。 Chromeならば、メニューボタンから
「メニューボタン」 ↓ 「その他のツール」 ↓ 「デベロッパーツール」
ショートカットキー ［Ctrl］+［Shift］+［I］ のが早いですね。 何種類かの機種での見え方が確認できます。（この世のすべての端末は無理ですが）「RESPONSIVE」を選べば任意のサイズのデバイスの見え方が確認できますね。 （表示がPCと変わらない場合はリロードしましょう。）
これまでChromeで確認していたのですが、Firefoxでもできることを発見 いまさらかい！ ← 前からできましたっけ？
「メニューボタン」 ↓ 「WEB開発」 ↓ 「レスポンシブデザインモード」
ショートカットキー ［Ctrl］+［Shift］+［M］
メディアクエリーを使ってスマホアクセスだけデザインを変更させる場合、しきい値をどれくらいにするか、と言う問題がありますが。 やはり、iPAD での見え方をどちらにするか、が基準となる感じですかね？ iPAD などのタブレットでPCと同じデザインで見せたいか、サイズが大きくてもタブレット端末と同じ表示にしたいか？ デヴェロッパーツールを見ると、iPAD の画面幅は 768px x 1024px であることが分かるので、 iPAD ではPCモードで表示されるように設定したければ、しきい値を 768pxにすれば良いですね。 まぁ、幅固定のサイトデザインであれば、デバイスがなんであれ、サイトの表示幅を下回ったら表示を変えるようにすればよいですね。 ※このブログは、ブログのテンプレート(Simplicity2)の標準機能でモバイル対応しているので、それに任せています。（モバイル用のCSSを別に記述する仕様。モバイルかどうかの識別はどのような方式なのかまでは知りませんが、幅だけで検出しているわけではないようです。）
コメント