横向模式的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样式表并且页面放大了 - 我不明白我做错了什么.

I're通过这个阅读: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。

因此，似乎发生的情况是，在横向模式下，您的 100% 宽度计算为 768px，即使可用宽度为 1024px。（我在 1024 像素的屏幕上显示 768 像素的页面，这会导致拉伸或放大）。

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

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

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