当 iPad 处于纵向时，缩小 Mobile Safari 视口宽度？-
Posted
技术标签:
【中文标题】当 iPad 处于纵向时，缩小 Mobile Safari 视口宽度？-【英文标题】：Scale down Mobile Safari viewport width when iPad is in portrait orientation?- 【发布时间】：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。
【问题讨论】：
【参考方案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 的答案是我最终使用的答案。以上是关于当 iPad 处于纵向时，缩小 Mobile Safari 视口宽度？-的主要内容，如果未能解决你的问题，请参考以下文章
MFMailComposeViewController 在 iPad 上强制纵向
iPad应用程序首先进入纵向模式，然后在解锁屏幕后进入横向模式，在锁定时处于横向模式
即使 iPad 处于纵向模式，如何强制 iPad 上的电视处于横向模式
自动布局可以调整 UITableView 的大小以在 ipad 上纵向增长和横向缩小吗？