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

Question

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

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

更新

Chrome v25具体......

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

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

更新v2

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

Answer 1

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

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

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

height> width = portrait
height <width = landscape

Answer 2

我相信其他人已经知道如何在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布局而无需调整浏览器大小

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

Answer 3

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

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

模拟媒体类型

打开Chrome Web工具面板(F12或打开它)单击开发人员工具窗口右上角的小链轮(在以前的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'); }
}

Answer 4

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

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

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

Answer 5

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

Answer 6

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

Answer 7

对于最新的Chrome（版本62），已完全更改。

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