当 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 上纵向增长和横向缩小吗?

Xcode 4.6:横向 iPad 应用程序中只有纵向区域处于活动状态

iPad添加视图然后告诉它根据方向模式调整大小?