0

我最近做了一个快速投资组合网站，我仍在调整中，但我使用了一个 susy 网格，当我使用浏览器将其调整为更小时，它仍然看起来像我预期的那样。本质上我有三个断点，一个用于浏览器，一个用于平板电脑，一个用于手机。

唯一的问题是，当我将它加载到我的手机 (HTC Desire) 上时，缩放似乎很远，并且它的大小就像中间断点（平板电脑）一样。

我设置的休息时间是：

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

网站在这里

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

4

2 回答 2

2

这实际上与 Susy 或正确设置断点无关。默认情况下，移动 Safari 的视口宽度为 980 像素，因此它可以处理对移动设备不友好的网站。如果你建立了一个适合移动设备的网站，你必须让 Safari 知道。例如，请参阅iphone safari 上的自动缩放。你可能想要这样的东西：

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-01-15T17:07:45.027 回答
0

嘉莉，

我不知道您的 HTC Desire 的分辨率 - 但我用来检查响应式设计的“断点”是否正确分解的一种工具是：

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

它是张贴视口大小的书签。但是，在带有 google chrome 的 mac 上，我发现这个数字“关闭”了大约与滚动条宽或类似的像素数量相同的像素。所以它并不完美 - 但它确实有助于解决问题。

我会查看您的 em 是否与您预期的分解像素宽度相匹配，看看是否与您的 HTC 相匹配 - 并且 EM 可能会在此过程中搞砸（浏览器设置、您的 html 对象没有正确的设置等。 ）。您始终可以尝试通过将其设置为固定像素宽度进行测试，然后再次对 em(s) 进行所有数学运算。

我不确定这是否有帮助，但至少你现在还有一个工具可以选择（如果你已经不知道这个工具；）

祝你好运，干杯，-杰里米

于 2013-01-15T13:08:18.787 回答