当 iPad 处于纵向时，缩小 Mobile Safari 视口宽度？-答案

【问题标题】：Scale down Mobile Safari viewport width when iPad is in portrait orientation?-当 iPad 处于纵向时，缩小 Mobile Safari 视口宽度？-
【发布时间】：2011-06-29 11:36:17
【问题描述】：

我正在开发一个网站，该网站旨在在 iPad 上以横向模式查看时效果最佳。一切都在一个 1024px 宽的 <div> 容器中。但是，我仍然需要缩小视口，因此当用户将 iPad 转为纵向时，用户无需缩小或水平滚动即可查看页面上的所有内容。

目前我的<head> 中有这个<meta> 标签：

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

以横向模式查看页面时，一切都显示正常，但我无法让上述所需的纵向行为正常工作。我尝试将initial-scale 更改为0.75，结果正好相反：一切都适合纵向模式，但iPad 处于横向模式时会有额外的水平空间。

我可以使用任何 CSS、Javascript 或特殊的视口设置来使其工作吗？

附：我不能使用user-scalable=no。

【问题讨论】：

标签： css ios ipad mobile-safari viewport

【解决方案1】：

您甚至可以在用于桌面浏览器的相同 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

【讨论】：

感谢您的回答。如果我首先使用基于百分比或 em 的设计，这应该很容易......

【解决方案2】：

您可以像这样使用特定于方向的 CSS：

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

在这种情况下，您可能必须将视口设置设置为设备的最大宽度，并使用 CSS 处理内容的实际宽度。例如，将所有内容包装在一个 div 中，每个方向具有适当的宽度，1024px 或 768px（减去状态栏和浏览器 chrome 是必需的）。

<meta id="viewport" name="viewport" content="initial-scale=1.0;minimum-scale=1.0; maximum-scale=1.0" />

【讨论】：

谢谢，hmthr 的答案和你的答案非常相似，我希望我可以将两者都标记为答案，但 hmthr 的答案是我最终使用的答案。