iPhone中的自动旋转问题（纵向到横向）答案

【问题标题】：Auto rotate issues in iPhone (portrait to landscape)iPhone中的自动旋转问题（纵向到横向）
【发布时间】：2012-01-08 17:07:50
【问题描述】：

我希望我的 iphone 在旋转时自动缩放我的网站。

当我使用这行代码时，它可以工作：

<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1.0, user-scalable=yes|no" />

但问题是它激活了我的纵向和横向 CSS，即使它应该在横向模式下只激活一个：

<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width : 480px)" type="text/css" href="css/mobileStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<link rel="stylesheet" media="screen and (max-width : 320px)" type="text/css" href="css/mobilePortraitStyles.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">

当我使用这条线而不是上面的元数据时，css 可以正常工作，但旋转时没有自动缩放：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

有什么问题？我该怎么办？

除了上面的元行之外，我还有这些行：

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="apple-mobile-web-app-capable" content="yes"/>

我在 iPhone 4 上测试（使用 iOS5）

【问题讨论】：

标签： iphone html css mobile responsive-design

【解决方案1】：

旋转时没有自动缩放的问题是 iOS 错误。在视口中设置最大比例似乎可以解决它，但实际上引入了许多其他问题 - 正如您在此处看到的那样，它不会调整视口大小，因此不会触发媒体查询。

您可能想看看workaround。

【讨论】：

【解决方案2】：

你试过using the orientation keyword in your media queries吗？例如

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”>

【讨论】：

这个问题是它也会影响桌面浏览器（无论高度大于宽度还是相反）
是的，但是你的其他媒体查询也是如此，前提是你把窗口做得足够小！您可以尝试将and (max-device-width : 480px)（或您需要的任何宽度）添加到查询中。