横向模式的iPad正在扩展我的网站 - 我不知道如何解决它

Question

我的测试页面位于： http ： //dev.my-igloo.net/ps-rwd/

我试图了解媒体查询并根据浏览器宽度更改网站宽度 - 该网站必须在iPad和iPhone上工作，目前我正在iPad上测试它并且有点疯狂。

请记住，网站设计/布局目前还不完整，因为我只是在处理初始设置，然后再深入研究完善所有内容。 我为每个样式表设置了不同的背景颜色，以便很容易看出哪一个被加载。

我头上有这个标签：

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

如果我像这样设置我的媒体查询：

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" />

<!-- Main Stylesheet -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 769px)" />
<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 481px) and (max-width: 768px)" />
<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 321px) and (max-width: 480px)" />

当我在横向模式下在iPad上进行测试时，页面会加载默认样式表，但会进行缩放，我必须左右滚动才能看到整个布局，或者捏缩放以缩小以使其适合屏幕。

我怎么能避免这个？ 我认为通过将初始比例设置为1.0将使其加载而不放大。

然后我将媒体查询改为：

<!-- For Desktop Browsers -->
<link rel="stylesheet" type="text/css" href="ps-default.css" media="screen and (min-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (min-width: 769px) and (max-width: 1024px)" />

<!-- 768 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-768.css" media="screen and (max-width: 768px) and (orientation:portrait)" />
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (min-width: 481px) and (max-width: 767px) and (orientation:landscape)" />

<!-- 480 wide screens -->
<link rel="stylesheet" type="text/css" href="ps-480.css" media="screen and (max-width: 480px) and (orientation:landscape)" />

然后在风景模式的iPad上加载了768样式表并且页面放大了 - 我不明白我做错了什么。

我读过这篇文章： http ： //developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html#//apple_ref/doc/uid/TP40008193并没有找到解决方案这个问题。 我尝试过的其他选项包括最小刻度和最大刻度，但这取消了捏缩放功能，这是不可取的。

我现在已经恢复到最初的媒体查询集，并希望有人可以帮助我。

Answer 1

据我所知，由于Safari计算设备宽度的方式，这似乎更像是一个问题。 基本上，Safari总是根据纵向方向获取设备宽度。 因此，当您说width = device-width时，无论方向如何，它总是等于768px。

因此，在横向模式下，即使可用宽度为1024px，您的100％宽度也会计算为768px。 （我在1024px屏幕上显示768px页面，导致拉伸或放大）。

可以想到的解决方案是提供固定的视口宽度。

<meta name="viewport" width="1024" />

这有一个很大的缺点，您的视口不会根据查看设备自动缩放。 但是如果你真的需要这两件事，你可能需要考虑某种动态的服务器端检测，并根据请求中的用户代理检测将不同的元视口代码传递给浏览器。

Answer 2

经过一个早上的测试，我同意其余部分 - 从风景到肖像到风景的翻转暴露了Safari中的一个错误。 我发现绕过它的唯一方法是使用：

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

这使每个方向保持适当的比例。 这个修复的唯一缺点是你无法放大。 对于文本较少或年龄较大的网站来说，这不是一个很好的解决方案，但在其他方面也是如此。

另外，这里有一个很好的JS黑客： https ： //gist.github.com/901295允许缩放。 但是，一旦缩放，如果方向改变了，则会出现相同的旧错误。

Answer 3

找到更好的解决方案。 可在ipad和iPhone上使用横向和纵向。

<meta name="viewport" content="width=1062px, user-scaleable=yes" />

1062px可以是任何例外：800px或更大的东西。

Answer 4

@ graham-t在这里有最好的解决方案IMO，但它只有一个问题; 现在它不会根据设备分辨率响应调整大小。

至少对我来说这是一个诀窍 - 我在横向模式下获得iPad的宽度和缩放，并且在其他设备上正确调整大小：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />