hirokonaBlog

ググる→忘れそう→即時メモ 京都のWebデザイナーの備忘録

Chromeの8月更新でのDevToolsのEmulationパネル変更がワタシ的に残念な件

Chromeちゃん、、、emulation画面の項目変更ありがとう、、でもこれ、、、
_人人 人人人人人_
> 使いづらいよ! <
 ̄Y^Y^Y^Y^Y^Y^Y  ̄

ちょろめさんの8/26らへんの更新で開発者ツール(デベロッパーツール、DevTools)のなかみも若干変わった模様。
変わったパネルの内容は下記のサイトでまとめてくださっているとおり。

【テーマカスタマイズ】モバイル表示を簡単に確認!Google Chromeのデベロッパーツールの標準機能で出来ちゃうよ! | Taka’s Life :
http://takaslife.com/2014/08/28/chrome-mobile-view/

なるほど確かにツールバーにアイコンが増えて直接使えるようになったので恩恵を受ける方もおおいのだろうなー。

でもこれ、、、わたしには、、、
_人人 人人人人人_
> 使いづらいよ! <
 ̄Y^Y^Y^Y^Y^Y^Y  ̄

理由は

今までは例えば端末名のプルダウンでiPhone5を選ぶと、
UAと表示領域の変更をバラバラに設定できていたけど、
それが一緒になっちゃった模様だから!

旧画面の使い方は下記記事でまとめてくださっている
Chromeデベロッパーツールのモバイル向けデバッグ機能について | infoScoop開発者ブログ : http://www.infoscoop.org/blogjp/2014/06/20/chrome-devtools-mobile-debug/

それによって
・viewportでcontent=”width=640″っつって指定してあるけど画面の大きさは320px〜♪って基準で表示してくれる

・DevicePixelRatioの項目があるけど、値を変更してもなんもない

・「iPhone5の画角はポートレートはコレな!ランドスケープはコレな!」となって期待した表示にならない場合の調整が面倒

・画面のエミュレートがちゃんとできていない状態が見受けられる

_人人 人人人人人_
> め ん ど い ! <
 ̄Y^Y^Y^Y^Y^Y^Y  ̄

今までどおり、UAだけ偽装させてよ。。
下手なエミュレートは携帯全盛期にうんざりするほど見てきたからそっちの機能拡張にははじめから希望持っていないよ。。。
画角なんてブラウザ枠持って自分で変えるよ。。。

_人人 人人人人人_
>  対 策 !  <
 ̄Y^Y^Y^Y^Y^Y^Y  ̄
いまのところ、640px基準のサイトを見るには
・エミュレートパネルのresolutionを640px*1136pxにかえて端末名を変えないようにひっそりと暮らす
・エミュレートさせてみて変なことになっていたらエミュレートパネルの[reset]ボタンを押してブラウザ全画面状態に戻す。その後、サイトを更新しないようにひっそりと暮らす
・値を変えながらエミュレートを繰り返すとバグったので、その場合は新しいタブを作ってひっそりと一からやり直す

という感じです。

以上、壊れるほど愛しても3分の1も伝わらないマイホォァ〜〜を記事にしたためてみました。
どなたがいい方法ありませんかね(ヽ´ω`)

英語だったらいい文献が落ちているのでしょうが、情熱と冷静の間で…(めんどい)。
ツイッターで「Chrome ツール」で検索した限りは「ボタンが置かれて便利になった」って意見も多いなー。まだまだツイート自体が少ないけど。

ではでは。

[2014.09.10 追記]
スマホサイトのpjaxの検証したら挙動がおかしい。。。
前の時は大丈夫だったのに。。。なんなん。。。もう。。。
[//2014.09.10 追記]

[2014.09.11 追記]
わかった。端末指定せずに解像度(resolution)指定して
Emulate Mobileにチェックが入った状態で保存すればいいのか。
なぞがとけた!pjaxのバグもなんか直ったわーい。
[2014.09.11 追記]


投稿日

カテゴリー:

投稿者:

タグ:

コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください