是否有可能效仿定位在浏览器？(Is it possible to emulate orientati

正如标题是可以效仿的方向在谷歌Chrome或Firefox？ 含义某种程度上改变浏览器的支持媒体查询（方向=（横向或纵向））

我有一个手机模拟器，但我想有由铬或Firebug的开发工具。

更新

镀铬V25具体...

任何人，在谷歌Chrome浏览器开发工具>覆盖>覆盖设备的方向可以改变alpha ， beta和gamma 。 我认为这是从开始的地方，但我不知道如何将这些工作，可以为此找不到任何..

也可以效仿CSS媒体，而不是纵向和横向的，但打印，屏幕，电视等。

更新V2

这是一个老问题，而Chrome已经改变了多次如何做到这一点。

Answer 1:

请参阅K.阿兰·贝茨的回答对Chrome的更近的仿真功能/更新的解释。

是否有可能效仿定位在浏览器？

仿效媒体类型

打开Chrome Web工具面板（F12或者无论你打开它）点击小链轮的开发者工具窗口的角落（在Chrome的以前版本的右下角）的右上角。 根据设置标题，单击覆盖 。 接下来，选中旁边的复选框来模拟CSS媒体 ，然后选择哪些媒体的目标，你想从下拉菜单中进行模拟。

仿效取向的嬗变

采取偷看在此的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'); }
}

Answer 2:

在Chrome开发工具：如果你去设置>覆盖>设备指标

如果交换尺寸屏幕分辨率的方向会改变，orientationchange事件将被触发。

取向取决于“宽度”和“高度”之间的关系 。 如果“高度”比“宽”的较高值时，浏览器会在方向：“纵向”，反之亦然。

高度>宽度=肖像
高度<宽度=景观

Answer 3:

我相信其他人已经找到了如何通过现在效仿定位在Chrome，但我遇到了这篇文章，想添加的人仍在寻找帮助说明。

它实际上相当简单。

这些指令的电流

---

Chrome的稳定34.0.1847.131

---

从Chrome开发工具中（Chrome中，命中F12带来了Chrome浏览器开发工具）去Emulation标签。
选择您希望从下拉列表效仿并击中模拟装置。 当你争相效仿，“屏幕”一节处于叠合部分名单Emulation标签左侧获得一个勾号，以表明它是有效的。 选择它。

在屏幕部分，你是模拟设备的分辨率将显示在靠近顶部的文本输入字段。 它们之间有一个“交换尺寸”按钮，将切换宽度与高度，这在本质上将会切换您的仿真，从纵向到横向。

其他一些相关的事情可以做，Chrome浏览器开发工具仿真器内部

您可以：

• 模拟设备的像素比
• 模仿CSS媒体类型（盲文，浮雕，手持式，打印，投影，屏幕，语音，TTY，电视：参见RFC 2534和相关文件的更多的细节）
• 欺骗用户代理：你可以有铬“冒充”其他浏览器引擎。
• 模拟式触摸屏（它并不完美，但它是一个很好的接触（<= 边敲击 ））
• 模拟地理位置坐标（包括“不可用的位置”仿真）
• 模拟加速度计

我在纵向个人技巧发展

假设你有一个16：9显示器，旋转VESA支架，以及支持方位的改变驱动器（你可以找到了在Windows的屏幕分辨率设置，如果有一个‘方向’下拉列表，那么你可以旋转视图。）

转动您的屏幕，然后转动您的Windows显示（你也可以[按Ctrl] [Alt]键[左箭头]旋转显示）。 模拟人像方向正如我上面提到和设备像素比例设置为1，这将扩大您的移动设备仿真器全屏大小。 它不会触发本地移动布局没有一些额外的帮助，但基于新兴媒体查询可以让你[Ctrl]键[+]，以扩大Chrome的EM值触发您的移动布局。

使用开发工具模拟器，您可以近似一个触摸屏界面，而无需触摸屏显示器。

它也可以让你有任何尺寸的16：9显示器显示“宽屏”移动布局。 当然，16:10显示器可以让你模仿10:16布局，而不必调整您的浏览器

一个功能，我真的希望看到谷歌加入到这是模拟的同时有一个“双击”自动调整窗口大小的能力。 这是目前不支持。

Answer 4:

我使用的控制台和输入这行

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

将火orientationChange事件，因此触发，你在你的脚本有任何事件侦听器。

Answer 5:

正如@ MrOggy85曾表示你的方向是由浏览器的高度和宽度定义。 您可以在Firefox中通过工具> Web开发>自适应设计视图仿效这一点，这可以让你选择普通的屏幕尺寸，让你翻转方向。 我希望这有帮助？

Answer 6:

这里有很多的答案，但我认为，Chrome可能略有演变，这是不是太复杂。 进入开发工具>仿真在Chrome中。 有4个子菜单：设备，屏幕，用户代理，和传感器。 在设备 ，你可以选择你的设备（例如“苹果iPad 1/2 /苹果迷你”）。 如果您需要模拟交换的方向，只要进入屏幕子选项卡，并有带箭头会左右换方向的小按钮。 只需按下该按钮。

Answer 7:

对于最新的Chrome（62版），它完全改变了。

1. 切换开发者工具。
2. 点击右上角的菜单中选择“自定义和控制DevTools”。
3. >传感器 - 通过更多工具去。
4. 更改方向为横向向左或向右景观为u喜欢。

Answer 8:

简单！！！ 默认视图是人像，如果你是模拟设备，（尽管肖像的CSS媒体查询）你可以处理的决议，有谷歌的文档中的这一形象https://developer.chrome.com/devtools/docs/mobile-emulation /device_metrics.png

只要按一下分辨率宽度和高度，并对其做之间的箭头！

请享用

Answer 9:

设备方向更改可以在Chrome中效仿。 只要进入“设置”菜单，可以使用齿轮图标在开发工具的右下角打开，然后选择“替换”选项卡。 选择“覆盖设备的方向”复选框，并在到输入框中输入新值。

阿尔法表示绕z轴的设备的从0到360度的运动。 贝塔表示绕x轴的装置的从-180度至180度的运动 - 一个从前向后运动。 伽马表示绕y轴的设备的从-90到90的运动 - 左到右运动。 更改值将触发deviceorientation事件。

希望这是有帮助的。

Answer 10:

在仿真选项卡只需点击屏幕上的按钮320和568之间，所以你切换分辨率的左侧和按钮！ 将模拟纵向和横向模式。

Answer 11:

有点晚，但是这个工程在谷歌浏览器了。

打开Firebug并单击您可以选择您希望看到该应用的设备型号的电话图标下面。

像这样的事情

接下来，转到resolution下的emulation性能如图上面的图片。 （右下角）现在点击在相同的双箭头图标resolution属性。 您应该看到这样的事情

看到的高度和宽度被交换，并因此旋转:)

希望帮助。

Answer 12:

设置方位之前刚刚更改上下文....

driver.context("NATIVE_APP");
driver.rotate(ScreenOrientation.LANDSCAPE);
driver.context("WEBVIEW_1");

Answer 13:

1. F12窗口
2. 进入响应状态
3. 选择设备
4. 在可以切换方向正确

你可以在这里看到它

文章来源: Is it possible to emulate orientation in a browser?