javascript - 同一HTML页面的横向和纵向设计

Question

我需要为我的网络应用程序创建两个版本（例如，仅 1 个 HTML 页面）：一个用于横向（宽视图），一个用于纵向（高视图）。但我需要像我们通常在 iPad 中那样运行它们；在纵向模式下，纵向版本应该可以工作，如果模式是横向，那么横向版本。

我在某处读过这个，但不确定。我可以用一个 HTML 文件和两个 CSS 文件制作应用程序吗？

Answer 1

查看 Google 上的响应式网页设计。我的应用程序使用 Twitter 的 Bootstrap 项目，但方法很明显：根据设备的当前宽度定义 CSS。宽度改变，CSS 改变。

http://twitter.github.com/bootstrap/scaffolding.html#responsive

对于 CSS3 和媒体查询，请查看这篇文章：

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

它可能会像这样：

/* iPads (landscape-wide) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

 /* iPads (portrait-tall) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

虽然需要一些研发...

希望这可以帮助