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