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