64

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

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

更新

Chrome v25 特定...

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

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

更新 v2

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

4

12 回答 12

29

在 Chrome 开发工具中：如果您转到设置>覆盖>设备指标

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

方向取决于 'width' 和 'height' 之间的关系。如果 'height' 的值高于 'width'，浏览器将处于方向：'portrait'，反之亦然。

高度 > 宽度 = 纵向
高度 < 宽度 = 横向

于 2013-02-28T14:15:28.510 回答
13

我确信其他人现在已经想出了如何在 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 值以触发您的移动布局。

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

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

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

于 2014-03-23T00:54:26.410 回答
13

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

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

它将触发orientationchange 事件并因此触发您在脚本中拥有的任何事件侦听器。

于 2014-09-25T19:31:07.147 回答
12

有关 Chrome 最新仿真功能/更新的说明，请参阅K. Alan Bates 的回答。

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





模拟媒体类型

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

在此处输入图像描述

模拟方向变化

看看这个 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'); }
}
于 2013-04-24T02:42:53.190 回答
8

正如@MrOggy85 所说，方向由浏览器的高度和宽度定义。您可以通过Tools > Web Developer > Responsive Design View在 Firefox 中模拟此功能，这使您可以选择常见的屏幕尺寸并翻转方向。我希望这有帮助？

于 2013-03-07T09:46:52.490 回答
6

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

  1. 切换开发人员工具。
  2. 单击右上角的菜单“自定义和控制 DevTools”。
  3. 浏览更多工具 -> 传感器。
  4. 根据需要将方向更改为横向左侧或横向右侧。
于 2017-11-20T10:58:14.827 回答
5

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

于 2014-05-04T04:12:38.960 回答
2

简单的！！！如果您正在模拟设备，默认视图是纵向，（尽管纵向的 css 媒体查询）您可以只处理分辨率，Google 的文档中有这张图片 https://developer.chrome.com/devtools/docs/mobile-emulation /device_metrics.png

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

享受

于 2014-05-20T09:15:52.347 回答
1

有点晚了，但这也适用于谷歌浏览器。

打开 firebug 并单击电话图标，然后您可以选择要在其中查看应用程序的设备型号。

像这样的东西

在此处输入图像描述

接下来，转到如上图所示的属性resolution。emulation（右下角）现在单击同一resolution属性中的双箭头图标。你应该看到这样的东西

在此处输入图像描述

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

希望有帮助。

于 2015-04-13T14:06:31.437 回答
1

在仿真选项卡中，只需单击左侧的屏幕按钮和 320 和 568 之间的按钮，即可切换分辨率！这将模拟纵向和横向模式。

于 2014-08-12T09:21:36.700 回答
1

可以在 Chrome 中模拟设备方向更改。只需转到“设置”菜单，该菜单可以使用开发人员工具右下角的齿轮图标打开，然后选择“覆盖”选项卡。选择“覆盖设备方向”复选框并在输入框中输入新值。

Alpha 表示设备围绕 z 轴从 0 到 360 度的运动。Beta 表示设备围绕 x 轴从 -180 到 180 度的运动——从前到后的运动。Gamma 表示设备围绕 y 轴从 -90 到 90 的运动——从左到右的运动。更改值将触发 deviceorientation 事件。

希望这会有所帮助。

于 2013-10-15T10:09:09.427 回答
0

只需在设置方向之前更改上下文....

driver.context("NATIVE_APP");
driver.rotate(ScreenOrientation.LANDSCAPE);
driver.context("WEBVIEW_1");
于 2014-10-10T09:41:33.353 回答