Question

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

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

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

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

我可以使用任何CSS，Javascript或特殊视口设置来实现此功能吗？

P.S。我无法使用user-scalable=no。

Answer 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

Answer 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（减去状态栏和浏览器镶边是必要的）。

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

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

2 个答案: