css - jQuery Mobile 方向改变解决方案

Question

我正在开发一个 jQuery Mobile 应用程序。它有大量动态生成的 CSS，到目前为止，我一直在为纵向开发一切。明显的问题是，当我倾斜我的设备时，它看起来很糟糕。我不需要为应用程序提供横向视图，但我也不反对。谁能建议一个最简单的解决方案，选择横向视图或以某种方式将应用程序锁定为纵向模式？

Answer 1

有两种方法可以检查方向.. 首先 1)

$(window).bind("orientationchange", function(evt){
                   alert(evt.orientation);
/*do what you want.*/
                   });

其次使用 css，您可以使用 min-width 进行检查。我正在使用 iPad，然后我检查 768 和 1024。做这些事情

@media screen and (min-width: 768px){
    #realTimeContents {
   overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  height:850px 

}
}
@media screen and (min-width: 1024px){
    #realTimeContents {
   overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  height:600px 

}
}