Javascript 基于移动定位更改CSS

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

您可以使用window.onorientationchange事件。

首先给您的样式表包含行一个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);

});

---

下面的JQuery代码似乎最适合我…绑定示例没有

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

范例

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

---

有关更多详细信息，请参见

是否有任何选项可绑定到窗口大小调整事件，如果X大于Y，则为横向？Y比X大你有肖像吗？将1 var保留为布尔值，isLandscape，如果更改了，请编辑样式表？为什么您认为CSS媒体查询不是干净的解决方案？我认为

窗口。方向
是一个数字，而不是字符串。^^icktoofay您是对的（已修复）。我读错了一些东西。不管怎样，在手机浏览器上，这个/应该/起作用。@Mike Welcome。如果投票支持我的答案，你可以表达你的感激之情