Question

当移动设备旋转到横向（目标设备是iphone和android）时，我的webapp的CSS完全错位。我尝试使用解释here的javascript解决方案，以使我的应用程序在方向更改时在portrait.css和landscape.css文件之间切换，但仍然无效。一旦将portrait.css发布到实时服务器上，它甚至搞砸了portrait.css（尽管它在我的本地机器上工作）。

该应用的网址为http://mobile.geekstats.com/

有谁知道如何修复景观css？谢谢！

Answer 1

使用CSS媒体查询更新您的设计

iPhone目前不支持方向（Thx @vava），因此请使用宽度低于

的媒体查询

方向查询：

http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) {
  h1 {
    color: red;
  }
}
@media all and (orientation:landscape) {
  h1 {
    color: blue;
  }
}

宽度查询：

/* Portrait */
@media only screen and (max-width: 320px) {
  h1 {
    color: red;
  }
}
/* Landscape */
@media only screen and (min-width: 321px) {
  h1 {
    color: blue;
  }
}

查看http://lessframework.com有关基于宽度的媒体查询设计的示例。

还有许多其他媒体查询选项可以定位查看会话的特定属性：
http://www.w3.org/TR/css3-mediaqueries/#contents

移动网络应用程序CSS在方向更改时中断

1 个答案:

方向查询：

宽度查询：