it-swarm.dev

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

由于标题可以在谷歌浏览器或Firefox中模拟方向?意思以某种方式更改浏览器以支持媒体查询(方向=(横向或纵向))

我有一个移动模拟器,但我想从chrome或firebug获得开发人员工具。

更新

Chrome v25具体......

对于任何人,在 Google Chrome开发工具>覆盖>覆盖设备方向 您可以更改alphabetagamma。我认为这是一个开始的地方,但我不知道这些是如何工作的,因此无法找到任何东西..

也可以模拟CSS媒体,但不是肖像和风景,而是打印,屏幕,电视等。

更新v2

这是一个老问题,Chrome已经多次更改了如何执行此操作。

59
TryingToImprove

请参阅 K. Alan Bates的回答 解释Chrome最新的仿真功能/更新。

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





模拟媒体类型

打开Chrome Web工具面板(F12或打开它)单击开发人员工具窗口右上角的小链轮(在以前的chrome版本的右下角)。在设置标题下,单击覆盖。接下来,选中模拟CSS媒体旁边的复选框,然后从下拉列表中选择您要模拟的媒体目标。

enter image description here

模拟方向变化

看看 这个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

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

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

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

高度>宽度=肖像
身高<宽度=风景

28
Giorgio

我相信其他人已经知道如何在Chrome中模拟方向,但我发现这篇文章并希望为仍在寻求帮助的人添加说明。

它实际上相当简单。

这些说明是最新的


Chrome稳定34.0.1847.131


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

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

您可以在Chrome Dev Tools的模拟器中执行其他一些相关操作

您可以:

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

我在纵向方向发展的个人提示

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

物理旋转屏幕,然后在Windows中旋转显示屏(您也可以[Ctrl] [Alt] [左箭头]旋转显示屏)。如上所述模拟纵向方向,并将设备像素比率设置为1.这会将移动设备模拟器扩展为全屏大小。如果没有其他帮助,它本身不会触发移动布局,但基于em的媒体查询将允许您[Ctrl] [+]扩展Chrome的em值以触发您的移动布局。

使用Dev Tools仿真,您可以近似没有触摸屏监视器的触摸屏界面。

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

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

13
K. Alan Bates

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

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

它将触发orientationchange事件,从而触发脚本中的任何事件侦听器。

12
Andy Schmidt

正如@ MrOggy85所说,方向是由浏览器的高度和宽度定义的。您可以通过 工具> Web开发人员>响应式设计视图 在Firefox中模拟这个,这可以让您选择常用的屏幕尺寸并让您翻转方向。我希望这有帮助?

8
Tom Riley

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

5
snibbe

对于最新的Chrome(第62版),它已完全更改。

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

简单!!!默认视图是肖像,如果您正在模拟设备,(尽管css媒体查询肖像)您可以只处理分辨率,这个图像在谷歌的文档 https://developer.chrome.com/devtools/docs/mobile -emulation/device_metrics.png

只需点击分辨率宽度和高度之间的箭头即可完成!

请享用

2
j.fernando.go

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

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

希望这是有帮助的。

1
aldo

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

1
Roboneter

有点迟,但这也适用于谷歌铬。

打开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