モバイルオリエンテーションに基づいてCSSを変更する

Question

モバイルアプリケーションのページの向きが横から縦に変更されたり、逆の場合にCSSのファイルを変更する最適な方法は何ですか？私はAndroidとiPhoneの両方をサポートする必要があります。それはメディアのクエリが他のアイデア、最もクリーンな方法ではないようですか？

Answer 1

は私のために最善を動作しているようです...結合の例はしませんでした。詳細については

$(document).ready(function() { 
       $(window).resize(function() { 
        alert(window.orientation); 
        }); 
       }); 

Answer 2

window.onorientationchangeイベントを使用できます。

Answer 3

まず、スタイルシートに次の行を追加します。id = "cssElement"または何か。

が続いてjQueryの使用：jQueryのコードの下に

$(document).ready(function(){ 

    // The event for orientation change 
    var onChanged = function() { 

     // The orientation 
     var orientation = window.orientation; 

     if(orientation == 90) { 
      $('#cssElement').attr('href', '/path/to/landscape.css'); 
     } else { 
      $('#cssElement').attr('href', '/path/to/portrait.css'); 
     } 

    }; 

    // Bind the orientation change event and bind onLoad 
    $(window).bind(orientationEvent, onChanged).bind('load', onChanged); 

}); 

Answer 4

例

/* For portrait */ 
@media screen and (orientation: portrait) { 
    #toolbar { 
    width: 100%; 
    } 
} 

/* For landscape */ 

@media screen and (orientation: landscape) { 
    #toolbar { 
    position: fixed; 
    width: 2.65em; 
    height: 100%; 
    } 

    p { 
    margin-left: 2em; 
    } 
} 

here