ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    スポンサーサイト

    このエントリーを含むはてなブックマーク はてなブックマーク - スポンサーサイト あとで読む
    上記の広告は1ヶ月以上更新のないブログに表示されています。
    新しい記事を書く事で広告が消せます。

    Google Chromeをスマートフォンのエミュレーターにする方法

    このエントリーを含むはてなブックマーク はてなブックマーク - Google Chromeをスマートフォンのエミュレーターにする方法 あとで読む
    モバイル・ファースト」ということで、スマホ用のWebページを用意しています。

    スマートフォンの実機、もしくはエミュレーターを用意しなければならないのですが、Google Chromeでエミュレートする方法が紹介されていました。

    ChromeでiPhone5やNexus5等にEmulateできる機能が便利:phpspot開発日誌

    ChromeでiPhone5やNexus5等にEmulateできる機能が便利です。
    Chrome32から使える機能のようで、デベロッパーツールはよく使っていたものの、分かりにくい位置にあることもあって、使っていない方も多いのでは?ということでご紹介。



    確かに、分かりにくい位置に、エミュレーターのボタンがありました。
    phpspot開発日誌で紹介されている通りに操作してみたら、簡単に使えました。

    機能の詳細は、Device Mode Mobile Emulation - Google Chrome(英語ページ)で紹介されています。


    ●備忘録
    (1) Google Chromeで、「デベロッパー ツール」を開く。 (ショートカット: Ctrl+Shift+I)
    (2) 画面右側に出てくる「Show drawer」ボタンを押す。 ←ここが分かりにくい!
    (3) 画面左下側に出てくる「Emulation」を押す。
    (4) エミュレートしたいデバイス(iPhone5等)を選べばOK。

    ・Google Chrome 「Show drawer」ボタン
    Google Chrome 「Show drawer」ボタン

    ・Google Chrome 「Emulation」ボタン
    Google Chrome 「Emulation」ボタン

    レスポンシブ・デザインを試すだけなら、ブラウザーの画面を手動で大きくしたり、小さくしたりするだけでもいいかな?

    jQuery Mobile スマートフォンサイト デザイン入門 (WEB PROFESSIONAL)
    西畑一馬 / 鍋坂理恵
    アスキー・メディアワークス
    2012-02-02
    ¥ 2,570


    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/1115-623895e3

    FC2Ad

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。