是否可以在浏览器中模拟方向?

作为标题,是否可以在 google chrome 或 firefox 中模拟方向?意味着以某种方式更改浏览器以支持媒体查询(方向=(横向或纵向))

我有一个移动模拟器,但我想拥有来自 chrome 或 firebug 的开发人员工具。

### 更新

Chrome v25 特定...

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

也可以模拟 CSS 媒体,但不是纵向和横向,而是打印、屏幕、电视等。

更新 v2

这是一个老问题,Chrome 已经多次更改如何做到这一点。

stack overflow Is it possible to emulate orientation in a browser?
原文答案
author avatar

接受的答案

请参阅 K. Alan Bates's answer 以了解 Chrome 最新的仿真功能/更新的说明。
==================================================== ==================================================== ==================================================== ==================================================== ====================

Is it possible to emulate orientation in a browser?

模拟媒体类型

打开 Chrome Web 工具面板(F12 或您打开它的方式)单击开发者工具窗口右上角的小 sprocket(以前版本的 chrome 的右下角)。在 Settings 标题下,单击 Overrides。接下来,选中 Emulate CSS Media 旁​​边的复选框,然后从下拉列表中选择您要模拟的媒体目标。

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

答案:

作者头像

在Chrome Dev工具中:如果您转到设置>替代>设备指标

如果将尺寸交换为屏幕分辨率,则方向将更改,并且将触发方向变化事件。

方向取决于“宽度”和“高度” 之间的关系。如果“高度”的值高于“宽度”,则浏览器将处于方向:“肖像”,反之亦然。

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

作者头像

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

其实很简单。

这些说明是最新的


Chrome 稳定版 34.0.1847.131


在 Chrome 开发工具中(在 Chrome 中,按 F12 以调出 Chrome 开发工具)转到 Emulation 选项卡。
从下拉列表中选择您要模拟的设备并点击 Emulate 。当您进行模拟时,“模拟”选项卡左侧堆叠部分列表中的“屏幕”部分会获得一个复选标记,表示它处于活动状态。选择它。

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

您可以在 Chrome 开发工具的模拟器中做一些其他相关的事情


你可以:

  • 模拟设备像素比
  • 模拟 CSS 媒体类型(盲文、浮雕、手持、打印、投影、屏幕、语音、tty、电视:请参阅 RFC 2534 和相关文档了解更多细节)
  • 欺骗用户代理:您可以让 Chrome “冒充”其他浏览器引擎。
  • 模拟触摸屏(它并不完美,但它的触感很好(<= rimshot ))
  • 模拟地理位置坐标(包括“位置不可用”模拟)
  • 模拟加速度计

我对纵向发展的个人建议
==================================================== =====

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

物理旋转您的屏幕,然后在 Windows 中旋转您的显示器(您也可以 [Ctrl][Alt][Left Arrow] 来旋转显示器)。如上所述模拟纵向并将设备像素比设置为 1。这会将您的移动设备模拟器放大到全屏尺寸。如果没有其他帮助,它不会原生触发移动布局,但基于 em 的媒体查询将允许您 [Ctrl][+] 放大 Chrome 的 em 值以触发您的移动布局。

使用开发工具仿真允许您在没有触摸屏监视器的情况下 approximate 触摸屏界面。

它还允许您让任何尺寸的 16:9 显示器显示“宽屏”移动布局。自然地,16:10 的显示器可以让您模拟 10:16 的布局,而无需调整浏览器的大小

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

作者头像

我正在使用控制台并输入此行

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

它将启动“定向”事件,因此会触发您在脚本中拥有的任何事件听众。

作者头像

正如 @mroggy85所述,您的方向是由浏览器的高度和宽度定义的。您可以通过工具> Web开发人员>响应式设计视图在Firefox中模仿此内容,这使您可以选择常见的屏幕尺寸并允许您换上方向。我希望这有帮助?

作者头像

对于最新的 Chrome(版本 62),它完全改变了。

  1. 切换开发者工具。
  2. 点击右上角菜单“自定义和控制 DevTools”。
  3. 浏览更多工具 -> 传感器。
    4.根据您的喜好将方向更改为横向左侧或横向右侧。
作者头像

这里有很多答案,但我认为 Chrome 可能已经略有发展,这并不太复杂。在 Chrome 中进入 开发者工具 > 仿真。有 4 个子选项卡:设备、屏幕、用户代理和传感器。在设备下,您可以选择您的设备(例如“Apple iPad 1 / 2 / Apple Mini”)。如果您需要模拟交换方向,只需进入 Screen 子选项卡,就会有一个带有左右箭头的小按钮来交换方向。只需按下那个按钮。

作者头像

简单的!!!默认视图是肖像,如果您要模拟设备(尽管CSS媒体肖像查询)可以处理分辨率,那么Google的文档中有此图像 https://developer.chrome.com/devtools/docs/mobile-emulation/device_metrics.png

只需单击分辨率宽度与高度之间的箭头及其完成之间的箭头!

享受

作者头像

设备方向的变化可以在铬中模仿。只需转到“设置”菜单,可以使用开发人员工具右下的COG图标打开,然后选择“覆盖”选项卡。选择“覆盖设备方向”复选框,然后在输入框中输入新值。

Alpha表示设备在Z轴周围的运动从0到360度。beta代表X轴周围设备的运动,从-180到180度 - 前后运动。伽马表示Y轴周围设备的运动从-90到90-左右运动。更改值将触发设备方向事件。

希望这很有帮助。

作者头像

在“仿真”选项卡中,只需单击左侧和320和568之间的按钮上的屏幕按钮,就可以切换分辨率!这将模仿肖像和景观模式。