Question

使用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>

Answer 1

通过使用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 Framework：http://lessframework.com/

之类的东西

Answer 2

我会在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 个答案: