Question

当移动应用程序页面方向从横向更改为纵向时，更改css文件的最佳方法是什么，反之亦然。我只需要支持Android和iPhone。媒体查询似乎不是最干净的方式，任何其他想法？

Answer 1

实施例

/* 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

Answer 2

首先给你的样式表包括一行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 3

下面的JQuery代码似乎对我来说效果最好......绑定示例没有。

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

Answer 4

您可以使用window.onorientationchange事件。

基于移动定位改变CSS

4 个答案: