web-dev-qa-db-ja.com

ブラウザで向きをエミュレートすることは可能ですか？

タイトルはgoogleで方向をエミュレートすることが可能であるため、chromeまたはfirefox？意味は何らかの方法でブラウザーをメディアクエリをサポートするように変更します（orientation =（landscapeまたはportrait））

私はモバイル用のエミュレータを持っていますが、chromeまたはfirebugの開発者ツールが欲しいです。

更新

Chrome v25固有...

誰でも、Google Chrome Dev Tool> Overrides> Override Device Orientationで、alpha、beta、およびgammaを変更できます。 、しかし、私はこれらがどのように機能するのか見当がつかず、そのため何も見つけることができません。

CSSメディアをエミュレートすることも可能ですが、ポートレートやランドスケープではなく、印刷、スクリーン、テレビなどをエミュレートすることもできます。

V2を更新

これは古い質問であり、Chromeはこれを行う方法を複数回変更しました。

google-chromecss3firebugmedia-queriesdeveloper-tools
59
TryingToImprove

Chromeの最新のエミュレーション機能/更新の説明については、 K。Alan Batesの回答 を参照してください。

ブラウザで向きをエミュレートすることは可能ですか？





メディアタイプのエミュレート

Chrome Webツールパネル（F12またはそれを開いた場合））開発者ツールウィンドウの右上（以前のバージョンのChromeの右下）にある小さなスプロケットをクリックします。 設定見出し、オーバーライドをクリックします。次に、CSSメディアのエミュレートの隣のチェックボックスをマークしてから、シミュレートするメディアターゲットを選択します。落ちる。

enter image description here

向きの変更のエミュレート

this jsfiddle を覗いて出力フレームのサイズを変更します。ブラウザの向きに応じて背景が切り替わります。

body {
    background-position: top center;
}

@media screen and (orientation: portrait) {
    body { background-image: url('http://petapixel.com/assets/uploads/2013/01/vangough.jpg'); }
}
@media screen and (orientation: landscape) {
    body { background-image: url('http://cdn-media.hollywood.com/images/l/BobRoss2_620_102912.jpg'); }
}
12
Cory Danielson

In Chrome Dev Tools：Settings> Overrides> Device metrics）に移動した場合

画面解像度の寸法を交換すると、方向が変更され、orientationchange-eventがトリガーされます。

向きは「幅」と「高さ」の関係に依存します。 「高さ」の値が「幅」よりも高い場合、ブラウザの向きは「縦」になり、逆の場合も同様です。

高さ>幅=縦
高さ<幅=横

28
Giorgio

他の人はChrome=で方向をエミュレートする方法を考え出したと思いますが、私はこの投稿に出会い、まだ助けを探している人に指示を追加したかったです。

実際にはかなり単純です。

これらの指示は現在のものです

Chrome Stable 34.0.1847.131

Chrome Dev Tools（Chrome内でF12を押して、Chrome Dev Tools）を呼び出して[エミュレーション]タブに移動します。
エミュレートするデバイスをドロップダウンリストから選択し、Emulateを押します。エミュレートすると、[エミュレーション]タブの左側にあるスタックセクションリストにある[画面]セクションに、アクティブであることを示すチェックマークが付きます。選択してください。

[画面]セクションでは、エミュレートしているデバイスの解像度が上部近くのテキスト入力フィールドに表示されます。幅と高さを切り替える「寸法を入れ替える」ボタンがあります。これにより、エミュレーションがポートレートからランドスケープに切り替わります。

Chrome Dev Tools 'Emulator

あなたはできる：

  • デバイスのピクセル比をエミュレートする
  • CSSメディアタイプをエミュレートします（点字、エンボス、ハンドヘルド、印刷、投影、スクリーン、音声、tty、tv：詳細については RFC 2534 および関連ドキュメントを参照してください）
  • なりすましのユーザーエージェント：Chrome "なりすまし"他のブラウザエンジンを使用できます。
  • タッチスクリーンをエミュレートします（完璧ではありませんが、ナイスタッチです（<=rimshot））
  • ジオロケーション座標をエミュレートします（「位置が利用できない」エミュレーションを含む）
  • 加速度計をエミュレートする

ポートレートオリエンテーションの開発のための私の個人的なヒント

16：9モニター、回転するVESAスタンド、および方向の変更をサポートするドライバーがあると仮定します（Windowsの画面解像度設定で確認できます。「方向」ドロップダウンリストがある場合は、ビューを回転できます）

画面を物理的に回転してから、Windowsでディスプレイを回転します（[Ctrl] [Alt] [左矢印]でディスプレイを回転することもできます）。上記で説明したように縦向きをエミュレートし、デバイスピクセル比を1に設定します。これにより、モバイルデバイスエミュレーターがフルスクリーンサイズに拡大されます。追加のヘルプがなければモバイルレイアウトはネイティブにトリガーされませんが、emベースのメディアクエリを使用すると、[Ctrl] [+]でChromeのem値を拡大してモバイルレイアウトをトリガーできます。

開発ツールエミュレーションを使用すると、タッチスクリーンモニターを使用せずにタッチスクリーンインターフェイスを近似できます。

また、任意のサイズの16：9モニターに「ワイドスクリーン」モバイルレイアウトを表示させることもできます。当然、16：10モニターを使用すると、ブラウザーのサイズを変更せずに10:16レイアウトをエミュレートできます

Googleが本当にこれに追加してほしい機能の1つは、「ダブルタップ」でウィンドウのサイズを自動的に変更するエミュレート中の機能です。現在サポートされていません。

13
K. Alan Bates

コンソールを使用してこの行を入力しています

window.dispatchEvent(new Event('orientationchange'));

orientationchangeイベントを起動するため、スクリプト内にあるイベントリスナーがトリガーされます。

12
Andy Schmidt

@ MrOggy85が述べているように、向きはブラウザの高さと幅によって定義されます。 Tools> Web Developer> Responsive Design Viewを使用して、Firefoxでこれをエミュレートできます。これにより、一般的な画面サイズを選択し、向きを反転できます。これが役立つことを願っていますか？

8
Tom Riley

ここには多くの答えがありますが、Chromeは少し進化したかもしれません。これはあまり複雑ではありません。Chromeで開発者ツール>エミュレーション 4つのサブタブがあります：デバイス、画面、ユーザーエージェント、センサー。デバイスで、デバイスを選択できます（例：「Apple iPad 1/2/Apple Mini "）。スワップの方向をシミュレートする必要がある場合は、Screenサブタブに移動すると、矢印が左右に移動して方向を入れ替える小さなボタンがあります。そのボタンを押すだけです。

5
snibbe

最新のChrome（バージョン62）の場合、完全に変更されます。

  1. 開発者ツールを切り替えます。
  2. 右上のメニュー「DevToolsのカスタマイズと制御」をクリックします。
  3. [その他のツール]-> [センサー]を選択します。
  4. 向きを「Landscape left」または「Landscape right」に変更します。
4
David Zhang

簡単!!!デバイスをエミュレートしている場合、デフォルトビューはポートレートです（ポートレートのcssメディアクエリにもかかわらず）解像度を処理するだけで、Googleのドキュメントにこの画像があります https://developer.chrome.com/devtools/docs /mobile-emulation/device_metrics.png

解像度の幅と高さの間の矢印をクリックして、完了です!!

楽しい

2
j.fernando.go

デバイスの向きの変更はChromeでエミュレートできます。開発者ツールの右下にある歯車アイコンを使用して開くことができる[設定]メニューに移動し、[上書き]タブを選択します。 [デバイスの向きを上書きする]チェックボックスをオンにして、入力ボックスに新しい値を入力します。

アルファは、z軸を中心とした0〜360度のデバイスの動きを表します。ベータは、-180〜180度のx軸周りのデバイスの動きを表します-前後の動き。ガンマは、y軸を中心とした-90〜90のデバイスの動きを表します-左から右への動き。値を変更すると、デバイスオリエンテーションイベントがトリガーされます。

これが役に立てば幸いです。

1
aldo

[エミュレーション]タブで、左側の画面ボタンをクリックし、320〜568のボタンをクリックして、解像度を切り替えます！これは、ポートレートモードとランドスケープモードをエミュレートします。

1
Roboneter

少し遅れますが、これはGoogleで動作しますchromeも。

Firebugを開き、電話アイコンをクリックします。その後、アプリを表示するデバイスモデルを選択できます。

このようなもの

enter image description here

次に、上の図に示すように、resolutionプロパティの下のemulationに移動します。 （右下隅）同じresolutionプロパティの二重矢印アイコンをクリックします。このようなものが見えるはずです

enter image description here

高さと幅が交換され、回転していることを確認してください:)

お役に立てば幸いです。

1
Pramod Solanky

向きを設定する前にコンテキストを変更するだけです。..

driver.context("NATIVE_APP");
driver.rotate(ScreenOrientation.LANDSCAPE);
driver.context("WEBVIEW_1");
0
Mayank Kumawat
  1. F12ウィンドウ
  2. レスポンシブモードに入る
  3. デバイスを選択してください
  4. 右側で向きを切り替えることができます

ここで確認できます

0
James Russell