我有一个要求，我需要编写一个 HTML/CSS，它应该显示横向和纵向，具体取决于 iPad 的方向，最初我想使用 HTML 和 CSS 编写它，然后将其用于 iPad发展。
我的问题是实现这一目标的最佳方法是什么？拥有两个不同的 html/css 文件并根据设备的方向加载它们是否有意义，或者是否有任何其他方式来实现这一点。任何有关此的信息将不胜感激。
谢谢拉克斯
问问题
16038 次
1 回答
4
你想看看使用响应式网页设计来实现这一点。您可以根据屏幕大小确定要应用的样式。请记住，纵向视图时屏幕更宽。
您所做的是，您创建了两个不同的样式表。一个用于纵向，第二个用于横向。然后，您使用 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 像素宽时才会应用第二个样式表。
现在，如果通过 iPad 开发，您的意思是本机应用程序，那么这将行不通。对于原生应用程序，您需要使用 cocoa 框架来确定设备的方向。但是，如果您只是在本机应用程序中使用 webview，那么这将正常工作。
希望这可以帮助。
于 2012-01-06T12:47:39.603 回答