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

时间：2013-01-09 13:25:49

标签： google-chrome css3 firebug media-queries developer-tools

由于标题可以在谷歌浏览器或Firefox中模拟方向？意思是以某种方式更改浏览器以支持媒体查询（orientation =（landscape或portrait））

我有一个移动模拟器，但我想要使用chrome或firebug的开发人员工具。

更新

Chrome v25特定...

对任何人， Google Chrome开发工具＆gt;覆盖＆gt;覆盖设备方向您可以更改alpha，beta和gamma。我认为这是一个开始的地方，但我不知道这些是如何工作的，因此无法找到任何东西..

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

更新v2

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

13 个答案:

答案 0 :(得分：28)

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

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

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

身高＆gt; width =肖像
高度＆lt; width = landscape

答案 1 :(得分：13)

我确定其他人已经想出如何在Chrome中模拟定位，但我发现了这篇帖子，并希望为仍在寻求帮助的人添加说明。

实际上相当简单。

这些说明是

的最新说明

Chrome稳定34.0.1847.131

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

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

您可以在Chrome开发工具的模拟器

中执行其他一些相关操作

你可以：

  • 模拟设备像素比率
  • 模拟CSS媒体类型（盲文，浮雕，手持，打印，投影，屏幕，语音，tty，tv：有关详细信息，请参阅RFC 2534和相关文档）
  • 欺骗用户代理：您可以让Chrome“模仿”其他浏览器引擎。
  • 模仿触摸屏（这不是完美的，但它是一个很好的触摸（＆lt; = rimshot ））
  • 模拟地理位置坐标（包括“位置不可用”模拟）
  • 模拟加速度计

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

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

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

使用开发工具模拟，您可以在没有触摸屏显示器的情况下近似触摸屏界面。

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

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

答案 2 :(得分：12)

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

Is it possible to emulate orientation in a browser?





模拟媒体类型

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

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

答案 3 :(得分：12)

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

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

它会触发orientationchange事件，因此会触发脚本中的所有事件侦听器。

答案 4 :(得分：8)

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

答案 5 :(得分：5)

这里有很多答案，但我认为Chrome可能略有进化，这并不复杂。进入开发人员工具＆gt; Chrome中的仿真。共有4个子选项卡：设备，屏幕，用户代理和传感器。在设备下，您可以选择自己的设备（例如＆＃34; Apple iPad 1/2 / Apple Mini＆＃34;）。如果您需要模拟交换方向，只需进入屏幕子选项卡，然后会出现一个带箭头的小按钮，左右交换方向。只需按下该按钮即可。

答案 6 :(得分：4)

对于最新的Chrome（第62版），它会完全更改。

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

答案 7 :(得分：2)

易于!!!默认视图是纵向，如果您正在模拟设备，（尽管纵向的CSS媒体查询）您可以只处理分辨率，这些图像在谷歌的文档中 https://developer.chrome.com/devtools/docs/mobile-emulation/device_metrics.png

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

享受

答案 8 :(得分：1)

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

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

希望这有用。

答案 9 :(得分：1)

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

答案 10 :(得分：1)

有点晚，但这也适用于Google Chrome。

打开萤火虫并点击手机图标，然后您可以选择要查看该应用的设备型号。

像这样的东西

enter image description here

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

enter image description here

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

希望有所帮助。

答案 11 :(得分：0)

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

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

答案 12 :(得分：0)

  1. F12窗口
  2. 进入响应模式
  3. 选择设备
  4. 在右侧，您可以切换方向

    5. You can see it here

相关问题
最新问题