基於移動定位更改CSS

Question

當移動應用程序頁面方向從橫向更改爲縱向時，更改CSS文件的最佳方法是什麼，反之亦然。我只需要支持Android和iPhone。媒體查詢似乎不是最乾淨的方式，還有其他想法？

Answer 1

下面的jQuery代碼似乎工作最適合我......結合實例沒有。

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

Answer 2

您可以使用window.onorientationchange事件。

Answer 3

首先給你的樣式表包含一行id =「cssElement」或其他東西。

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