iPhone Mobile safari：Susy 网格在较短的页面上缩放到高度而不是宽度答案

【问题标题】：iPhone Mobile safari: Susy grid scales to height instead of width on shorter pagesiPhone Mobile safari：Susy 网格在较短的页面上缩放到高度而不是宽度
【发布时间】：2012-11-07 08:08:50
【问题描述】：

我在让 iPhone 的 Mobile Safari 缩放功能按预期工作时遇到问题。我在网格中使用 Susy：

$total-columns  : 12;
$column-width   : 60px;
$gutter-width   : 32px;
$grid-padding   : $gutter-width/2;
$container-style: static;

我正在使用这个视口元标记：

meta name="viewport" content="width=device-width"

问题是某些页面在 iPhone 上无法完全按比例缩小。这似乎仅在页面的高度小于其宽度时才会发生。因此，页面不会看到页面的整个宽度，而是按比例缩小，直到它在高度方面填满了视口。 “更长”的页面按预期缩小。

我不确定如何解决此问题。我用网格和元标记尝试了几种不同的方法，但无济于事。

【问题讨论】：

标签： iphone ios ios-simulator mobile-safari susy-compass

【解决方案1】：

使用这个元标记

<meta name = "viewport" content = "height=device-height, width = device-width,
    initial-scale = .1, user-scalable = yes">

根据需要提供初始比例。

【讨论】：

谢谢你，非常有趣。它解决了一个问题，但又产生了一些问题：initial-scale = .3 在 iPhone 的纵向模式下效果很好，但在横向和 iPad 上看起来很傻。有没有办法让它更“智能”？
developer.apple.com/library/safari/#documentation/…
Suresh，感谢您更新的答案。不幸的是，增加高度也无济于事。还是同样的问题。由于标准的 'width=device-width' 通常工作得很好，我开始认为我的基于 Susy 的网格有问题，但我不知道那可能是什么。
我对css不太了解。但也许这可以帮助你。 stackoverflow.com/questions/2313194/…
抱歉，它不起作用。最终，我通过将 '@media (max-width: 768px) { #page {min-height: 1500px;} }' 放入 CSS 文件中来“解决”它。不是很优雅，但很有效。