0

我希望我的 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）

4

2 回答 2

0

您是否尝试过在媒体查询中使用方向关键字？例如

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”portrait.css”&gt;
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”landscape.css”&gt;
于 2011-11-29T12:42:45.673 回答
0

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

您可能想看看解决方法。

于 2012-12-04T11:43:24.353 回答