可以在浏览器中模拟方向吗？

Question

作为标题，可以在google chrome或firefox中模拟方向吗？意思是以某种方式改变浏览器以支持媒体查询(方向=(横向或纵向))

我有一个模拟器的移动，但我想有从铬或firebug的开发工具。

更新

Chrome v25专用...

对于任何人来说，在Google Chrome Dev Tool > Overrides > Override Device Orientation中，您可以更改alpha、beta和gamma。我认为这是一个开始的地方，但我不知道这些是如何工作的，因此找不到任何东西。

也可以模仿CSS Media，但不是纵向和横向，而是平面、屏幕、电视等。

更新v2

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

Answer 1

有关Chrome的最新仿真特性/更新的解释，请参阅K. Alan Bates's answer。

Is it possible to emulate orientation in a browser?

模拟媒体类型

打开Chrome Web工具面板(F12或任何你打开它的方式)点击开发人员工具窗口右上角的小链轮(在chrome以前的版本中是右下角)。在设置标题下，单击Overrides。接下来，选中Emulate Media旁边的复选框，然后从下拉菜单中选择要模拟的媒体目标。

​

​

模拟方向更改

看一眼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'); }
}

Answer 2

在Chrome Dev Tools中:如果您转到Settings>Overrides>Device metrics

如果您将尺寸替换为屏幕分辨率，则方向将更改，并且将触发orientationchange-event。

高度方向取决于“宽度”和“高度”之间的关系。如果“height”的值比“width”的值高，则浏览器将显示方向：“portrait”，反之亦然。

height > width =纵向

高度<宽度=横向

Answer 3

我相信其他人现在已经想出了如何在Chrome中模拟方向，但我偶然看到了这篇文章，并想为仍在寻求帮助的人添加说明。

实际上，这相当简单。

这些说明的最新版本为

Chrome稳定34.0.1847.131

从Chrome Dev Tools (在Chrome内部，点击F12打开Chrome Dev Tools)转到Emulation选项卡。

从下拉列表中选择要模拟的设备，然后点击Emulate。模拟时，Emulation选项卡左侧堆叠部分列表中的"Screen“部分将获得一个复选标记，指示其处于活动状态。选择它。

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

您可以在Chrome Dev Tools的Emulator中执行的其他相关操作

您可以：

engines.

• Emulate

• 模拟设备像素比率specifics)

• Spoof
• 模拟CSS媒体类型(盲文、浮雕、手持、打印、投影、屏幕、语音、tty、电视:有关更多specifics)
• Spoof用户代理:您可以让Chrome“模拟”其他浏览器engines.
• Emulate触摸屏(它并不完美，但它是一个很好的touch(<=rimshot))
• Emulate地理位置坐标(包括“位置不可用”emulation)
• Emulate Accelerometer

我个人对肖像定向发展的建议

假设你有一个16:9的显示器，一个旋转的VESA支架，以及支持方向改变的驱动程序(你可以在Windows的屏幕分辨率设置中找到)。如果有一个"Orientation“下拉列表，那么你可以旋转视图。)

物理旋转你的屏幕，然后在视窗中旋转你的显示器(你也可以CtrlLeft箭头来旋转显示器)。模拟我上面提到的纵向方向，并将设备像素比率设置为1。这将使您的移动设备仿真器放大到全屏大小。它不会在没有额外帮助的情况下触发移动布局，但基于em的媒体查询将允许您按Ctrl键来放大Chrome的em值来触发您的移动布局。

使用Dev Tools仿真允许您在没有触摸屏显示器的情况下使用 a触摸屏界面。

它还允许您有任何大小的16:9显示器显示“宽屏”移动布局。自然，16:10的监视器将允许您模拟10:16的布局，而不必调整浏览器的大小

我真的很想看到Google添加的一个功能是在模拟时自动调整窗口大小的能力。这是目前不支持的。