Susy/Compass手机第一个网格不能在移动设备上工作

我最近做了一个快速的投资组合网站，我仍然在调整过程中，但我使用了一个susy网格，当我调整它的尺寸时浏览器，它仍然看起来如何我期望它看起来。我本质上有三个断点，一个用于浏览器，一个用于平板电脑，另一个用于手机。Susy/Compass手机第一个网格不能在移动设备上工作

唯一的问题是，当我将其加载到我的手机（HTC Desire）上时，缩放似乎没有了，而且它正在调整它的中间断点（平板电脑）。

我设置的休息是：

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

该网站是here

我也注意到，当你放大的部位，然后需要水平滚动，这是我试图避免的！实际上Susy网站也没有这样做。

来源

2013-01-15 Carrie Hall

这实际上与Susy没有任何关系，或者让你的断点正确。默认情况下，移动Safari浏览器的视口宽度为980像素，因此它可以处理不适合移动设备的网站。如果您建立了适合移动设备的网站，则必须让Safari知道。例如，请参阅automatic zoom on iphone safari。你可能想要这样的东西：

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

来源

2013-01-15 17:07:45

同意，如果我是你，我会看看bootstrap和or boilerplate来找出你的页面的

可能丢失的其他魔法。这就是我每次都必须从头开始做的事情 - 我去看看这些大男孩在做什么;） –

呃！菜鸟错误，我只是一起锤击网站，并会考虑优化它，一旦我得到了它。现在它工作正常。谢谢 –

嘉莉，

我不知道你的HTC Desire的分辨率 - 但是一个工具，我用它来检查我的“突破点”为响应式设计适当的击穿是这一个：

http://www.josscrowcroft.com/2011/code/window-size-bookmarklet/ https://github.com/josscrowcroft/Window-Size-Bookmarklet

这是张贴视口的大小，一个书签。在谷歌浏览器的Mac上，但我发现这个数字是“关闭”大约相同数量的像素作为滚动条宽或类似的东西。所以这并不完美 - 但它确实有助于解决问题。

我会看看你的EM是否符合你的期望像素宽度的细分，并看看是否符合你的宏达电 - 也可能会EM一路上弄糟（浏览器设置，你的HTML对象没有适当的设置等）。你总是可以尝试通过将其设置为一个固定的像素宽度来进行测试，然后再次对所有的数学表达式进行测试。

我不知道这会有所帮助，但至少你现在在你的腰带工具多了一个选项（如果你已经不知道这一个是;）

好运&欢呼声， -Jeremy

来源

2013-01-15 13:08:18

谢谢你，我以前没有见过这个工具，但它太棒了！我现在来看看他们的时间，谢谢你的帮助:-) –

没问题嘉莉，如果你发现这样的其他工具，请随时发送给我的方式！ https://plus.google.com/111783589266137495728 –

Susy/Compass手机第一个网格不能在移动设备上工作

回答

相关问题