我正在开发一个网站，最好在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或特殊的viewport设置可以使此功能正常工作？
P.S.我不能使用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设备，无论方向如何，device-width始终为768px...我知道这很令人困惑，但事实就是如此。
您还可以查看同一主题的一个非常好的教程， http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
<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（减去状态栏和浏览器chrome是必要的）。
<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />