我正在设计一个网站，该网站设计为在iPad上以横向模式查看时效果最佳。一切都在一个1024像素宽的<div>容器中。但是，仍然需要缩小视口(viewport)，因此当用户将iPad转到纵向时，用户不必缩小或水平滚动即可查看页面上的所有内容。
目前，我的<meta>中有这个<head>标记:
<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，无论方向如何，设备宽度始终为768px。
您也可以在以下位置查看一个很好的教程
http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8