36991


スマホ開発で疑問があります。

Google Chrome のPC版で開発しています。  
スマホ(iPhoneなど)でWebを見て動作確認をするのですが  
この際に、二本の指を使ったピンチズームという動作を行い  
その動作を確認したいのです。

PC版の Chrome のF12キーで開く、デベロッパーツールで  
この操作をエミュレートするにはどのようにしたらよいでしょうか？

できないなら、できない、ということで、あきらめて実機動作確認するのですが、どうも、chromeの過去バージョンではできたようなのです。

下記の2ページには、Chromeの過去バージョンのようなのですが  
Shiftを押してマウスをドラッグすることで、ピンチズームの操作ができると書かれています。  
しかし、現在の(最近の)chrome (バージョン: 60.0.3112.90（Official Build） （64
ビット）)では、このような操作になりません。

もう実機は不要!? Chromeのモバイルエミュレーターがとんでもなく進化していた - WPJ  
<https://www.webprofessional.jp/use-mobile-emulation-mode-chrome/>

Chromeデベロッパーツールでモバイルをエミュレートする | Web Tips  
<http://weback.net/utility/992/#contents-1>

何らかの設定があるのかもしれませんが、調べきれませんでした。  
やり方をご存知のかたは、教えてください。

例としての、動作確認としては、  
GoogleマップをiPhoneの(アプリではなく)ブラウザで開いて  
二本指で操作すると、回転がなくズームインズームアウトします。  
これを、PCのブラウザ(chrome)のマウスで操作して  
動かしてみたいということになります。  
(PCはデスクトップなのでタッチ対応していません。)

実際に行いたいことは、自分のところのWebページの  
二本指での操作を、PCで確認したいということになります。

Chromeにかぎらず、IEとかEdgeとかfirefoxでも同じことができるという情報お持ちでしたら教えていただければ、助かります。

よろしくおねがいします。


CC BY-SA 3.0
2017-08-04T03:15:45.237
36925
2017-08-07T04:37:39.750
2017-08-04T03:22:18.647
21047
21047
question
android iphone google-chrome
PCのchromeのマウス操作で動作確認のためピンチズームの操作を行いたい


コメントで追記した部分を回答にします。

現在のバージョンのChromeのDevelopertoolでピンチインアウトの動作は確認できます。  
例えばこのスタックオーバフローのサイトで実施するとShiftでピン‌​チズームできます。

ただし、例で上げていただいたGoogleMapのソースを確認すると、

[code]

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    
[/code]

とあり、ブラウザのピンチでのズームインアウトの制御は制御されており、自前でピンチアウトの操作を実装しているようで、実機とは違うイベント等が走り、実機と同じ検証をすることは難しいようです。

ちなみに実機が用意できるなら、USBデバック接続してデバイスの検証ができますのでこちらをおすすめします。  
Android  
<https://blog.codecamp.jp/developertools_smartphone>  
iOS  
<http://ameblo.jp/ep-och/entry-11993131466.html>


CC BY-SA 3.0
2017-08-07T04:37:39.750
36991
2017-08-07T04:37:39.750
22665
36925
answer