我正在开发一个网站，该网站设计为在 iPad 上以横向模式查看时效果最佳。一切都是 1024px 宽<div>容器。然而，我仍然需要缩小视口，这样当用户将 iPad 转为纵向时，用户不必缩小或水平滚动来查看页面上的所有内容。
目前我有这个<meta>标签在我的<head>:
<meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" />
当以横向模式查看页面时，一切都显示良好，但我无法使上述所需的纵向行为发挥作用。我尝试改变initial-scale to 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 http://itunes.apple.com/in/app/designmobileweb/id486198804?mt=8
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
