どうも、てとこん(@tetokon)です。
ブログやってる人間なら絶対気になる、自分のブログのスマホ用ページ。
デザインいじったりした後、皆さんどうやって確認してますか？
スマホから見てます？
最終的な確認ならいいですけど、途中でちょっと確認したい時なんかはMacからそのまま見れたら楽ですよね。
それが簡単に出来る方法があるのでご紹介したいと思います。
使うのは標準のブラウザSafari
まずはMacの標準のブラウザSafariを立ちあげます。
そして環境設定を開きます。
▲詳細タブを開き（①）、一番下にある「メニューバーに”開発”メニューを表示」にチェックを入れます（②）。
▲するとSafariのメニューバーに”開発”というメニューが出てきます。
▲まずは普通にPC用のページを開きます。
これはこのブログをMacのSafariから見たところ。
▲ここでSafariの”開発”メニューから「ユーザーエージェント」を選び、画像の用にiPhoneのSafariを選んでみます。
iPod touchもありますが、ここではどちらでも構いません。
▲すると表示がスマホ用のメニューになります。
▲幅が広すぎるので狭くしてみます。
どうですか？スマホから見てるっぽくないですか？
これMacから見てるんですよ！
▲もちろんトップページだけじゃなくシングルページもスマホ用のページで見れます。
”開発”メニューで選んだユーザーエージェントというのが、要は端末の情報みたいなもので、Safariからそれを変更する事で、あたかもiPhoneやiPodからアクセスしてる用に見せかけてスマホ用のページを表示しているのです。
ChromeやFireFoxでもアドオンを使えば似たような事はできますが、Safariはデフォルトでこの機能があるのが良いですね！
ご存じなかった方はデザインをいじる時にでも活用してみて下さい。
今回のでーじなところ
Macからスマホ用のページがサクっと確認できるのはでーじ便利！
モバイルページによくアクセスする人は使ってみて下さい！
でも完全にiPhoneからの見え方と同じにはならないのでやっぱり最終確認は実機で！