使用 HTML 和 CSS 创建横向和纵向布局
我有一个要求，我需要编写一个 HTML/CSS，它应该显示横向和纵向，具体取决于 iPad 的方向，最初我想使用 HTML 和 CSS 编写它，然后将其用于 iPad发展。
我的问题是实现这一目标的最佳方法是什么？ 拥有两个不同的 html/css 文件并根据设备的方向加载它们是否有意义，或者是否有其他方法来实现这一点。任何有关此的信息将不胜感激。
谢谢 拉克斯
I have got a requirement where I need to write a HTML/CSS, which should display Landscape and Portrait, depending upon the orientation of the iPad, that is initially I want to write this using HTML and CSS and then later use it for the iPad developement.
My question is what is the best way to achieve this?
Does it make sense to have two different html/css files and load them depending on the orientation of the device or is there any other way to implement this. Any information regarding this would be appreciated.
Thanks
Raaks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您想考虑使用响应式网页设计来实现这一目标。您可以根据屏幕的大小确定要应用的样式。请记住，纵向视图时屏幕会更宽。
您所做的是创建两个不同的样式表。第一个用于纵向，第二个用于横向。然后，您可以使用 CSS3 媒体查询在两者之间切换。
示例代码：
Portrait:
Landscape:
如您所见，您正在传递目标介质并声明每个样式表的目标宽度。仅当屏幕的当前宽度小于或等于 768 像素时才会应用纵向样式表。相反，仅当屏幕分辨率至少为 1,024 像素宽时才会应用第二个样式表。
描述该技术的简单教程。
描述该技术的原始 A List Apart 文章。
现在，如果通过 iPad 开发，您指的是本机应用程序，那么这不会工作。对于本机应用程序，您需要使用 cocoa 框架来确定设备的方向。但是，如果您只是在本机应用程序中使用 Web 视图，那么这将工作得很好。
希望这有帮助。
You want to look at using responsive web design to achieve this. You can determine what styles to apply depending on the size of the screen. Remember, the screen is wider when it's in portrait view.
What you do is, you create two different stylesheets. One for when it's in portrait and the second for landscape. Then, you use CSS3 media queries to switch between the two.
Sample code:
Portrait:
Landscape:
As you can see, you are passing the target medium and declaring a target width for each stylesheet. The portrait stylesheet will only be applied if the screen's current width is less than or equal to 768 pixels. Conversely, the second stylesheet will only be applied if the screen resolution is a minimum of 1,024 pixels wide.
A simple tutorial describing the technique.
The original A List Apart article describing the technique.
Now if by iPad development, you mean native applications then this will not work. For native applications, you need to use the cocoa framework to determine the device's orientation. However, if you are simply using a webview in a native application then this will work fine.
Hope this helps.