当iPad纵向时，缩小移动Safari浏览端口的宽度？
我正在devise一个在iPad上以横向模式浏览时效果最佳的网站。 一切都在一个1024像素宽的<div>容器中。 不过，我仍然需要缩小视口，所以当用户将iPad转为纵向时，用户不必缩小或水平滚动即可查看页面上的所有内容。
目前我的<head>有<meta>标签：
<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />
在横向模式下查看页面时，一切正常显示，但是我无法获得上述所需的纵向行为。 我尝试将initial-scale改为0.75 ，而恰恰相反：所有内容都适合纵向模式，但iPad处于横向模式时会有额外的水平空间。
有什么CSS，Javascript或特殊的视口设置，我可以用它来得到这个工作？
PS我不能使用user-scalable=no 。
您甚至可以在用于桌面浏览器的相同CSS中添加方向属性…只需添加以下内容;
@media only screen and (device-width:768px)and (orientation:portrait) /*iPad Portrait orientation styles */ @media only screen and (device-width:768px)and (orientation:landscape) /*iPad landscape orientation styles */
再次记住，对于iPad，设备宽度始终是768px，而不pipe方向如何…我知道这是令人困惑的，但这是它的方式…
你也可以在http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8查看一个很好的教程。
你可能能够使用像这样定向特定的CSS：
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
在这种情况下，您可能必须将视口设置设置为设备最大宽度，并使用CSS来处理内容的实际宽度。 例如，将所有东西都包裹在一个div中，每个方向都有适当的宽度，1024px或768px（减去状态栏和浏览器镶边是必要的）。
<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />