根据移动设备方向更改嵌入视频大小答案

【问题标题】：Change embedded video size based on mobile device orientation根据移动设备方向更改嵌入视频大小
【发布时间】：2011-06-19 09:32:03
【问题描述】：

结合使用 HTML 和 JS，如何检测设备是横向还是纵向，然后相应地更改嵌入视频的大小？

我知道检测屏幕方向的一种相当简单的方法是将宽度与高度进行比较，看看哪个更大。但是我怎么能在代码中使用这些变量来嵌入视频呢？代码来自 Vimeo：

<iframe src="http://player.vimeo.com/video/15813517?title=0&amp;byline=0&amp;portrait=0" width="320" height="480" frameborder="0"></iframe><p><a href="http://vimeo.com/15813524" rel="external">RCE: A Different Kind of Experience</a> from <a href="http://vimeo.com/user3163610">John D. Low</a> on <a href="http://vimeo.com">Vimeo</a>.</p>

【问题讨论】：

我记得 iPhone（3 和 3GS）报告其屏幕宽度为 480 像素无论其方向如何。顺便说一句，您可能会阅读这个问题，看看那里是否有任何有用的信息：Can JS/jQuery determine the orientation of the iPhone?

标签： html video mobile orientation

【解决方案1】：

我会在 javascript 中引用窗口的高度和宽度。

var h = window.innerHeight;
var w = window.innerWidth;

当高度较大时，设备为纵向，反之亦然。然后将视频宽度调整为 100% 并在 javascript 中获取视频宽度的实际像素，然后将宽度除以想要得到高度的比率。

我会使用类似的东西来检测变化。

(function oriChange(window){
    var h = window.innerHeight;
    var w = window.innerWidth;
    if(h > w){
        //portait
    }else{
       //landscape
    }

    setTimeout(function(){oriChange},500)
}(window))

【讨论】：

【解决方案2】：

实际上，您可以通过使用 CSS 调整 iFrame 窗口的大小来实现不使用 JS 的操作。查看 CSS3 媒体查询。它们允许您根据浏览器大小设置不同的布局，并适用于大多数现代浏览器。

W3C 规范：http://www.w3.org/TR/css3-mediaqueries/

好 ALA 文章：http://www.alistapart.com/articles/responsive-web-design/

另一个资源：http://www.thecssninja.com/css/iphone-orientation-css

开始使用它们的一种简单方法是使用 Less 框架之类的东西：http://lessframework.com/

【讨论】：

感谢您的想法，我设法通过将宽度设置为 100% 并将高度设置为 320 像素来解决部分问题。这样，纵向它是方形的，横向它是 3:2 的比例，两者看起来都不错。但是，这在桌面浏览器中看起来很糟糕。所以真的，有没有办法让我用javascript说 if(width>500) then width="X" and height="Y"？
关于 CSS3 媒体查询的一点是，它们本质上允许您为几种不同的分辨率设置样式，而不是尝试适应所有分辨率。例如，您可以为宽度低于特定像素数的布局设置视频宽度和高度，并为高于特定浏览器宽度的布局设置不同的宽度和高度。查看我在上面发布的 less 框架链接以获取示例。