Compass sass Susy/Compass mobile first网格在移动设备上不工作

我最近做了一个快速的公文包网站，我还在调整中，但我使用了一个susy网格，当我使用浏览器调整它的大小时，它仍然看起来像我期望的那样。本质上我有三个断点，一个用于浏览器，一个用于平板电脑，一个用于手机

唯一的问题是，当我把它加载到我的手机（HTC Desire）上时，它的变焦效果似乎很差，而且它的大小就像是中间的断点（平板电脑）

我设置的中断是：

$break-medium: 30em $total-columns;
$break-large: 60em $total-columns;

该网站是

我还注意到，当你放大网站时，你需要水平滚动，这正是我试图避免的！实际上Susy网站也不这么做。

Carrie

我不知道您的HTC愿望的解决方案-但我用来检查我的响应设计“断点”的正确分解的一个工具是：

https://github.com/josscrowcroft/Window-Size-Bookmarklet

它是一个bookmarklet，用于发布视口的大小。但在mac上，我发现这个数字“关闭”的像素数与滚动条的宽度差不多。因此，它并不完美——但它确实有助于解决问题

我会看看你的em是否与你期望的像素宽度相匹配，看看它是否与你的HTC相匹配——而且em可能会在这一过程中出错（浏览器设置，你的html对象没有正确的设置等等）。您可以通过将其设置为固定的像素宽度进行测试，然后再次对em进行所有数学运算，来尝试测试此功能

我不确定这是否有帮助，但至少你现在还有一个选择在腰带上使用工具（如果你还不知道这一点，那就是；）

祝你好运，干杯，

---

-Jeremy

这实际上与Susy无关，也与正确设置断点无关。默认情况下，mobile safari的视口宽度为980px，因此它可以处理非移动友好站点。如果你已经建立了一个移动友好的网站，你必须让Safari知道。例如，见。你可能想要这样的东西：

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

谢谢，我以前没见过这个工具，但它太棒了！我现在就去看看em的，谢谢你们的帮助：-）没问题，嘉莉，若你们找到任何其他类似的工具，请随时寄给我！同意，如果我是你，我会看一看引导和/或样板文件，找出你的页面中可能缺少的其他魔力。每当我必须从头开始时，我都会这样做——我去看看大男孩们在做什么；）哼！新手的错误，我刚刚敲定了这个网站，并打算在我建立它之后对它进行优化。现在很好用。谢谢