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

Question

提问by TryingToImprove

As the title is it possible to emulate orientation in google chrome or firefox? Meaning somehow change the browser to support media query (orientation = (landscape or portrait))

正如标题一样，是否可以在 google chrome 或 firefox 中模拟方向？含义以某种方式更改浏览器以支持媒体查询（方向 =（横向或纵向））

I have a emulator for mobile, but I would like to have the developer tools from chrome or firebug.

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

Update

更新

Chrome v25 specific...

Chrome v25 特定...

To anyone, in Google Chrome Dev Tool > Overrides > Override Device Orientationyou can change the alpha, betaand gamma. I think this is a place to start of from, but I have no idea how these work and can therefor not find anything..

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

It is also possible to Emulate CSS Media, but not portrait and landscape, but print, screen, tv etc.

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

Update v2

更新 v2

This is a old question, and Chrome have changed multiple times how to do this.

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

Answer 1

采纳答案by Cory Danielson

Refer to K. Alan Bates's answerfor an explanation of Chrome's more recent emulation features/updates.

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

Is it possible to emulate orientation in a browser?

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

Emulating Media Types

模拟媒体类型

Open the Chrome Web Tools Panel (F12 or however you open it) Click the little sprocket in the top right of the developer tools window (bottom right in previous versions of chrome's) corner. Under the Settingsheading, click Overrides. Next, mark the checkbox next to Emulate CSS Mediaand then select which media target you'd like to simulate from the dropdown.

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

enter image description here

在此处输入图片说明

Emulating Orientation Changes

模拟方向变化

Take a peek at this jsfiddleand resize the output frame -- it will switch backgrounds depending on what the browser orientation is.

采取偷看在此的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 2

回答by Giorgio

In Chrome Dev Tools: If you go to Settings>Overrides>Device metrics

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

If you swap the dimensions for the screen resolution the orientation will change and the orientationchange-event will be triggered.

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

The orientation is depending on the relationship between 'width' and 'height'. If 'height' has a higher value than 'width', the browser will be in orientation: 'portrait' and vice versa.

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

height > width = portrait
height < width = landscape

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

Answer 3

回答by K. Alan Bates

I'm sure others have figured out how to emulate orientation in Chrome by now, but I came across this post and wanted to add instructions for anyone still looking for help.

我相信其他人现在已经想出了如何在 Chrome 中模拟方向，但我看到了这篇文章，想为仍在寻求帮助的任何人添加说明。

It's actually rather simple.

其实很简单。

These instructions are current as of

这些说明是最新的

Chrome Stable 34.0.1847.131

铬稳定 34.0.1847.131

From within Chrome Dev Tools (Inside Chrome, hit F12 to bring up Chrome Dev Tools) go to the Emulation tab.
Select the device you wish to emulate from the dropdownlist and hit Emulate. When you Emulate, the "Screen" section that is in the stacked section list to the left of the Emulation tab gains a checkmark to indicate it is active. Select it.

从 Chrome Dev Tools 中（在 Chrome 内部，按 F12 以打开 Chrome Dev Tools）转到 Emulation 选项卡。
从下拉列表中选择您想要模拟的设备并点击Emulate。当您进行模拟时，“模拟”选项卡左侧的堆叠部分列表中的“屏幕”部分会获得一个复选标记，表明它处于活动状态。选择它。

In the Screen section, the resolution of the device you are emulating will be displayed in text input fields near the top. There is a "swap dimensions" button between them that will switch the width with the height, which in essence will switch your emulation from portrait to landscape.

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

Some other relevant things you can do inside Chrome Dev Tools' Emulator

你可以在 Chrome Dev Tools 的模拟器中做一些其他相关的事情

You can:

你可以：

Emulate the Device pixel ratio
Emulate CSS media types (braille,embossed,handheld,print,projection,screen,speech,tty,tv: See RFC 2534and related documents for more specifics)
Spoof user agent: you can have Chrome "impersonate" other browser engines.
Emulate touch screen (It's not perfect, but it's a nice touch(<=rimshot))
Emulate geolocation coordinates (including "position unavailable" emulation)
Emulate Accelerometer

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

My Personal Tip for Development in Portrait Orientation

我在人像方向发展方面的个人建议

Assuming you have a 16:9 monitor, a rotating VESA stand, and drivers that support a change in orientation (you can find that out in Windows' Screen Resolution settings. If there's an "Orientation" dropdownlist, then you can rotate your view)

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

Physically rotate your screen, then rotate your display in Windows (you can also [Ctrl][Alt][Left Arrow] to rotate the display). Emulate a portrait orientation as I mentioned above and set the Device pixel ratio to 1. This will scale up your mobile device emulator to full screen size. It won't natively trigger a mobile layout without some additional help, but em based media queries will allow you to [Ctrl][+] to scale up Chrome's em value to trigger your mobile layout.

物理旋转您的屏幕，然后在 Windows 中旋转您的显示器（您也可以 [Ctrl][Alt][Left Arrow] 旋转显示器）。模拟我上面提到的纵向并将设备像素比设置为 1。这会将您的移动设备模拟器放大到全屏尺寸。它不会在没有额外帮助的情况下本机触发移动布局，但基于 em 的媒体查询将允许您 [Ctrl][+] 放大 Chrome 的 em 值以触发您的移动布局。

Using the Dev Tools emulation allows you to approximatea touch screen interface without a touch screen monitor.

使用开发工具模拟器，您可以近似一个触摸屏界面，而无需触摸屏显示器。

It also allows you to have any sized 16:9 monitor display a "widescreen" mobile layout. Naturally, a 16:10 monitor would allow you to emulate 10:16 layouts without having to resize your browser

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

The one feature I really want to see Google add to this is the ability while emulating to have a "double tap" auto-resize the window. That's not currently supported.

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

Answer 4

回答by Andy Schmidt

I am using the Console and input this line

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

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

it will fire the orientationchange event and therefore trigger any event listeners that you have in your script.

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

Answer 5

回答by Tom Riley

As @MrOggy85 has stated you the orientation is defined by the height and width of the browser. You can emulate this in firefox via Tools > Web Developer > Responsive Design View, this lets you select common screen sizes and lets you flip the orientation. I hope this helps?

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

Answer 6

回答by David Zhang

For the latest Chrome (version 62), it is changed completely.

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

Toggle Developer Tools.
Click the top right menu "Customize and control DevTools".
Go through More tools -> Sensors.
Change Orientation to Landscape left or Landscape right as u like.

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

Answer 7

回答by snibbe

There are a lot of answers here, but I think Chrome may have evolved slightly and this isn't too complex. Go into Developer Tools > Emulationin Chrome. There are 4 sub-tabs: Device, Screen, User Agent, and Sensors. Under Deviceyou can choose your device (e.g. "Apple iPad 1 / 2 / Apple Mini"). If you need to simulate swapping orientation, just go into the Screensubtab and there's a little button with arrows going left and right to swap orientation. Just press that button.

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

Answer 8

回答by j.fernando.go

Easy!!! default view is Portrait if you are emulating the device, (despite the css media query of portrait) you can just handle the resolutions, there's this image in Google's documentation https://developer.chrome.com/devtools/docs/mobile-emulation/device_metrics.png

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

Just click in the Arrows between the RESOLUTION Width and Height and its DONE!!

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

Enjoy

享受

Answer 9

回答by Roboneter

In the emulation tab just click on screen button on the left and on the button between 320 and 568 so you switch the resolutions! that will emulate portrait and landscape mode.

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

Answer 10

回答by aldo

Device Orientation changes can be emulated in Chrome. Simply go to the "Settings" menu, which can be opened using the cog icon at the bottom right of the Developer Tools and select the "Overrides" tab. Select the "Override Device Orientation" checkbox and enter new values in to the input boxes.

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

Alpha represents the motion of the device around the z axis from 0 to 360 degrees. Beta represents the motion of the device around the x axis from -180 to 180 degrees - a front to back motion. Gamma represents the motion of the device around the y axis from -90 to 90 - a left to right motion. Changing the values will trigger a deviceorientation event.

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

Hope this is helpful.

希望这是有帮助的。

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

提问by TryingToImprove

Update

更新

Update v2

更新 v2

采纳答案by Cory Danielson

Refer to K. Alan Bates's answerfor an explanation of Chrome's more recent emulation features/updates.

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

回答by Giorgio

回答by K. Alan Bates

These instructions are current as of

这些说明是最新的

Chrome Stable 34.0.1847.131

铬稳定 34.0.1847.131

Some other relevant things you can do inside Chrome Dev Tools' Emulator

你可以在 Chrome Dev Tools 的模拟器中做一些其他相关的事情

My Personal Tip for Development in Portrait Orientation

我在人像方向发展方面的个人建议

回答by Andy Schmidt

回答by Tom Riley

回答by David Zhang

回答by snibbe

回答by j.fernando.go

回答by Roboneter

回答by aldo

相关推荐

最近更新

标签

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

提问by TryingToImprove

Update

更新

Update v2

更新 v2

采纳答案by Cory Danielson

Refer to K. Alan Bates's answerfor an explanation of Chrome's more recent emulation features/updates.

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

回答by Giorgio

回答by K. Alan Bates

These instructions are current as of

这些说明是最新的

Chrome Stable 34.0.1847.131

铬稳定 34.0.1847.131

Some other relevant things you can do inside Chrome Dev Tools' Emulator

你可以在 Chrome Dev Tools 的模拟器中做一些其他相关的事情

My Personal Tip for Development in Portrait Orientation

我在人像方向发展方面的个人建议

回答by Andy Schmidt

回答by Tom Riley

回答by David Zhang

回答by snibbe

回答by j.fernando.go

回答by Roboneter

回答by aldo

相关推荐

spring mvc 放置 css/js/img 文件的位置

是否可以在 xHTML strict 1.0 中使用 CSS 呈现空的 <div style="width:50%"> </div> 而不以像素为单位设置宽度和高度？

CSS CSS3 有选择地禁用悬停效果

按百分比动态将颜色更改为更亮或更暗 CSS (Javascript)

相关推荐

最近更新

标签