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

TryingToImprove

2013-01-09

70308

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

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

＃＃＃更新

Chrome v25 特定...

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

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

更新 v2

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

Is it possible to emulate orientation in a browser?

原文答案

Cory Danielson

2013-04-24

原文

接受的答案

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

答案:

オスカー

2013-02-28 29 原文

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

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

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

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

K. Alan Bates

2014-03-23 13 原文

我确信其他人现在已经想出了如何在 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 的布局，而无需调整浏览器的大小

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

Andy Schmidt

2014-09-26 13 原文

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

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

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

Tom Riley

2013-03-07 8 原文

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

David Zhang

2017-11-20 7 原文

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

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

snibbe

2014-05-04 5 原文

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

j.fernando.go

2014-05-20 2 原文

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

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

享受

aldo

2013-10-15 1 原文

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

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

希望这很有帮助。

Roboneter

2014-08-12 1 原文

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

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

更新 v2

答案:

这些说明是最新的

Chrome 稳定版 34.0.1847.131

相关问题

标签