Question

我希望我的iphone在轮换时自动缩放我的网站。

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

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

但问题在于它会激活我的CSS for portrait和lanscape，即使它只能以横向模式激活一个：

<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）

Answer 1

你试过using the orientation keyword in your media queries吗？ e.g。

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

Answer 2

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

您可能需要查看workaround。

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

2 个答案: