I've recently done a quick portfolio site which I'm still in the process of tweaking, but I've used a susy grid which when I resize it smaller using the browser, it still looks how I expected it to look. I have three breakpoints in essence, one for browsers, one for tablets, and one for phones.
Only problem is, when I load it up on my phone (HTC Desire) the zoom seems way off, and it's sizing it like it's the middle breakpoint (tablet).
The breaks I've set are:
$break-medium: 30em $total-columns;
$break-large: 60em $total-columns;
The website is here
I've also noticed that when you zoom in on the site, you then need to horizontally scroll, which is what I'm trying to avoid! The actually Susy site doesn't do this either.
This doesn't actually have anything to do with Susy, or getting your breakpoints right. By default, mobile safari acts like it has a viewport width of 980px, so that it can handle non-mobile-friendly sites. If you have built a mobile-friendly site, you have to let Safari know. See automatic zoom on iphone safari for example. You probably want something like this:
<meta name="viewport" content="width=device-width, initial-scale=1">