モバイルデバイスの向きに基づいて埋め込みビデオサイズを変更する

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-アイフォーンの方向を決定する） –

CSSを使用してiFrameウィンドウのサイズを変更して実際に行うことができます。 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の比率であり、両方とも良好に見える。しかし、これはデスクトップブラウザでは悪く見えます。本当に、（width> 500）width = "X" and height = "Y"の場合、javascriptを使って言うことができますか？ –

CSS3のメディアクエリに関することは、基本的に、すべての解像度を試して対応するのではなく、いくつかの解像度のスタイルを設定できることです。たとえば、レイアウトのビデオの幅と高さを幅のあるピクセル数以下に設定し、特定のブラウザ幅を超える幅と高さを設定します。上記の例のフレームワークのリンクを確認してください。 –

私は、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

モバイルデバイスの向きに基づいて埋め込みビデオサイズを変更する

答えて

関連する問題