汽车在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中)
答
你试过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”>
这里的问题是,它也影响到桌面broswer(身高是否比宽度或相对较大) – Alon
是的,但是这是你的其他媒体查询的真实太,假设你使窗口足够小!你可以尝试在查询中加入'和(max-device-width:480px)'(或者你需要的任何宽度)。 –