css – 当iPad处于纵向方向时,缩小移动Safari视口宽度？

我在一个网站上工作,该网站的设计在iPad上以横向模式观看时效果最佳.一切都是1024px宽< div>容器.但是,我仍然需要缩小视口,因此当用户将iPad变成纵向时,用户不必缩小或水平滚动,以查看页面上的所有内容.

目前我有这个< Meta>标记在我的< head&gt ;::

<Meta name="viewport" content="width=1024px,initial-scale=1.0,maximum-scale=10.0" />

当页面以横向模式查看时,一切都会显示正常,但是我无法获得上述所需的肖像行为.我尝试将初始尺寸改为0.75,完全相反的情况是：一切都适合肖像模式,但当iPad处于横向模式时,还有更多的水平空间.

有没有CSS,Javascript或特殊的视口设置,我可以用来让这个工作？

附：我无法使用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