我有一个要求，我需要编写一个 HTML/CSS，它应该显示横向和纵向，具体取决于 iPad 的方向，即最初我想使用 HTML 和 CSS 编写它，然后再使用它用于 iPad 开发。
我的问题是实现这一目标的最佳方法是什么？ 拥有两个不同的 html/css 文件并根据设备的方向加载它们是否有意义，或者是否有任何其他方式来实现这一点。任何有关这方面的信息将不胜感激。
谢谢 拉克斯
【问题讨论】：
标签： html css landscape portrait
您想考虑使用响应式网页设计来实现这一目标。您可以根据屏幕大小确定要应用的样式。请记住，纵向视图时屏幕更宽。
您所做的是创建两个不同的样式表。一个用于纵向，第二个用于横向。然后，您使用 CSS3 媒体查询在两者之间切换。
示例代码：
肖像：
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="portrait.css" />
风景：
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 1024px)" href="landscape.css" />
如您所见，您正在传递目标媒体并为每个样式表声明目标宽度。仅当屏幕的当前宽度小于或等于 768 像素时，才会应用纵向样式表。相反，仅当屏幕分辨率至少为 1,024 像素宽时才会应用第二个样式表。
A simple tutorial describing the technique.
The original A List Apart article describing the technique.
现在，如果 iPad 开发是指本地应用程序，那么这将不起作用。对于原生应用程序，您需要使用 cocoa 框架来确定设备的方向。但是，如果您只是在本机应用程序中使用 webview，那么这将正常工作。
希望这会有所帮助。
【讨论】：
@media (orientation: landscape) { ...