基於移動設備方向更改嵌入的視頻大小

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

來源

2011-02-01 Kyle Parker

我記得iPhone（3和3GS）報告其屏幕寬度爲480px *，無論它的方向如何。順便說一下，你可能需要閱讀這個問題，看看有沒有什麼有用的：[可以JS/jQuery確定iPhone的方向？]（http://stackoverflow.com/questions/2323281/can-js-jquery-確定的方向的iPhone） – 2011-02-01 16:18:37

實際上，您可以通過使用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

一個簡單的方法開始使用他們的是使用類似的減框架：http://lessframework.com/

來源

2011-02-01 17:02:49

感謝您的想法，我已設法通過將寬度設置爲100％和高度爲320px做部分解決方法。這樣，縱向是正方形，在景觀中是3：2的比例，兩者都很好看。但是，這在桌面瀏覽器中看起來很糟糕。所以真的，有沒有一種方法讓我用javascript說出if（寬度> 500）然後width =「X」和height =「Y」？ – 2011-02-01 17:35:02

我會參考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))

來源

2011-02-01 21:03:50

基於移動設備方向更改嵌入的視頻大小

回答

相關問題