是否可以在浏览器中模仿方向？ [英] Is it possible to emulate orientation in a browser?

问题描述

标题是否可以在Google Chrome或Firefox中模仿方向？意思有些改变浏览器支持媒体查询（orientation =（横向或纵向））

我有一个移动模拟器，但我想有开发工具chrome或firebug。

更新

Chrome v25特定...

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

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

解决方案

请参阅 and resize the output frame - it will switch背景取决于浏览器的方向。

  body {
 background-position：top center; 
} 
 
 @media屏幕和（orientation：portrait）{
 body {background-image：url（'http://petapixel.com/assets/uploads/2013/ 01 / vangough.jpg'）; } 
} 
 @media屏幕和（orientation：landscape）{
 body {background-image：url（'http://cdn-media.hollywood.com/images/l/BobRoss2_620_102912 .jpg'）; } 
} 
  

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))

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

Update

Chrome v25 specific...

To anyone, in Google Chrome Dev Tool > Overrides > Override Device Orientation you can change the alpha, beta and 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..

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

解决方案

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

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 Settings heading, click Overrides. Next, mark the checkbox next to Emulate CSS Media and then select which media target you'd like to simulate from the dropdown.

Emulating Orientation Changes

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

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

这篇关于是否可以在浏览器中模仿方向？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！