[Mac]スマホサイトの確認に便利なiPhone用の無料シミュレータ「iPhoney」
スポンサード
以下のページよりiPhoney をダウンロードします。
※当ブログは WordPressのスマホ最適化用プラグイン「WPTouch」を利用しています。
微妙な違いはやはりありると思いますが、大きなレイアウト崩れかないか?どうかなど、都度実機で確認するよりは
キーボードショートカット
ユーザーエージェントを指定できるウィンドウが開きますので必要に応じて入力します。
試しにAndroid のユーザーエージェント
実機でのチェックとの違いとして、スマホサイトのソースコードが見れるのが、個人的には嬉しいです。
スポンサード
スマホサイトを構築する上で厄介なのが「実機での動作検証」です。
細かい動きは実機を使って厳密にチェックする必要がありますが、レイアウトが崩れていないか?のチェックをするのであれば、iPhone用の無料シミュレータ「iPhoney」を使うと便利です。
iPhoney のダウンロード
以下のページよりiPhoney をダウンロードします。
iPhoney で早速確認
iPhoney でスマートホン用のサイトを見てみます。※当ブログは WordPressのスマホ最適化用プラグイン「WPTouch」を利用しています。
iPhone 実機との比較
同じページを、iPhone5 の実機で見てみます。微妙な違いはやはりありると思いますが、大きなレイアウト崩れかないか?どうかなど、都度実機で確認するよりは
端末の回転
ツールバーより「Window」より「Rotate iPhone」のメニューを選択するか、キーボードショートカット
Command + T
で端末を回転させることができます。ユーザーエージェントの変更・カスタマイズ
ツールバーより「iPhoney」から「Custom User Agent」メニューを選択します。ユーザーエージェントを指定できるウィンドウが開きますので必要に応じて入力します。
試しにAndroid のユーザーエージェント
Mozilla/5.0 (Linux; U; Android 4.0.1; ja-jp; Galaxy Nexus Build/ITL41D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30を入れて、先のキャプチャと同じページを見ると、こんな感じになりました。
ページのソースコードのチェック
ツールバーより「View」から「View Source」メニューを選択します。実機でのチェックとの違いとして、スマホサイトのソースコードが見れるのが、個人的には嬉しいです。
スポンサード
コメント