モバイルだとどのように閲覧できるの確認できるツー

質問

パソコンでサイトを作成していますが
スマホやiPhoneではどのように見えるのか、パソコン上で確認することはできますか？
モバイルだとどのように閲覧できるの確認できるツールがあれば教えてください。

回答No.2

asciiz · ベストアンサー

Webブラウザの Google Chrome で簡易エミュレートが可能です。

Chromeを起動して、動作確認したいページを表示します。

右上の三本線メニューボタンより、その他のツール→デベロッパーツール、を選択します。(キーボードショートカット:Ctrl+Shift+I でも可)

出てきたウインドウの左上に、四角い鏡みたいなアイコンがあります。(スマホを模したつもりのようです)
このアイコンを押すだけで、「スマホモード」になり、表示領域が制限され、User Agent も変更されます。

「Device」のドロップダウンから、いくつか登録済みの機器サイズに変更できますし、その下の縦横サイズを直接指定して未知の機器にも対応できます。
さらにその横の円矢印ボタンは、縦横数値を入れ替えます。スマホで横向き回転表示した状況となります。
Webのつくりによっては、変更されたUAにより対応したページ表示も確認できるでしょう。

まあ、Android4.0以降は、ハードウェアキーの廃止により「戻る/ホーム/タスク」ボタンが画面内表示になったものが多いので、その分を割り引いて考えなければいけませんが。
また、使用中のホームアプリにより、横画面時にそれらが下に移動する場合と、元の位置のままである場合などもあり、考え始めたらキリがないのですけど(汗

--

元のPC表示に戻すには、再度「Developer Tools」のスマホアイコンを押すだけです。
あるいは「Developer Tools」自体をそのツールバー一番右の[x]ボタンで消すことでも、通常状態になります。

お礼

ありがとうございました。

回答No.1

Kaneyan-R

利用するブラウザによって変わりますが、基本的には「そのまま」です。
スマホ用に配置した場合やブラウザチェックで表示切り替えるような場合は、スマホやブラウザ次第です。

ただし、ブラウザに特化した機能や表現は使えません。これはパソコンでも同じです。
あと、Flashムービーは使わないように。表示できるブラウザもありますが、ほぼ表示できないと思って下さい。

確認方法ですが、一番手っ取り早く確実なのは「本物の端末を使う」事。

もう一つはエミュレータを使う方法。
iPhoneは門外漢なのでわかりませんが、Windowsで対象がAndroidスマホなら、Windroyが使いやすいかな？
標準ではタブレットサイズですが、Windowsに環境変数設定すればスマホモードにも出来ますし。

ただし、Playストアアプリは入っていないので、アプリのインストールはapkパッケージを手に入れて、直接インストールしないと不可です。インストールと言っても、フォルダにコピーすれば終わりですが。

あと、パソコンの性能が低いとかなり動作が遅くなりますし、元のAndroidが古い（4.0.3）ので、対応するブラウザアプリが限られます。
※標準ブラウザは元々入っています。

■Windroy
http://www.windroye.com/

以下レビュー

■OCTOBA
これは軽い、軽いぞ！Windows上でAndroidを動作させるエミュレータ「Windroy」で遊ぶ
http://octoba.net/archives/20140509-android-feature-windroy.html

■窓の杜
Windows上で手軽に起動できるAndroid OS「Windroy」
http://www.forest.impress.co.jp/docs/news/20140422_645569.html

お礼

ありがとうございました。