Phi*_*hil 14 css mobile-safari viewport ipad ios
我正在开发一个网站,该网站旨在在iPad上以横向模式观看时效果最佳.一切都在1024px宽的<div>容器中.但是,我仍然需要缩小视口,因此当用户将iPad转为纵向时,用户无需缩小或水平滚动以查看页面上的所有内容.
目前我<meta>在我的标签中有这个标签<head>:
<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.
tes*_*dtv 14
您甚至可以在用于桌面浏览器的相同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查看相同的教程.