汽车在iPhone旋转的问题（纵向到横向）

我希望我的iphone自动伸缩我在旋转的网站。汽车在iPhone旋转的问题（纵向到横向）

当我使用这行代码它的工作原理：

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

但问题是，它同时激活我的CSS纵向和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中）

来源

2011-11-29 Alon

你试过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”>

来源

2011-11-29 12:42:45

这里的问题是，它也影响到桌面broswer（身高是否比宽度或相对较大） – Alon

是的，但是这是你的其他媒体查询的真实太，假设你使窗口足够小！你可以尝试在查询中加入'和（max-device-width：480px）'（或者你需要的任何宽度）。 –

旋转时没有自动缩放的问题是iOS错误。在视口中设置最大规模似乎解决它，但实际上由于引入的其他问题数量 - 因为你在这里看到的不调整视口，以便不触发媒体查询。

你可能想看看workaround。

来源

2012-12-04 11:43:24

汽车在iPhone旋转的问题（纵向到横向）

回答

相关问题