最近、まだ調整中の簡単なポートフォリオサイトを作成しましたが、ブラウザを使用してサイズを小さくすると、期待どおりに表示されるスージーグリッドを使用しました。本質的に3つのブレークポイントがあります。1つはブラウザー用、1つはタブレット用、もう1つは電話用です。
唯一の問題は、携帯電話（HTC Desire）にロードすると、ズームがかなりずれているように見え、中央のブレークポイント（タブレット）のようにサイズが変更されていることです。
私が設定した休憩は次のとおりです。
$break-medium: 30em $total-columns;
$break-large: 60em $total-columns;
ウェブサイトはこちら
また、サイトを拡大するときは、水平方向にスクロールする必要があることにも気づきました。これは、私が避けようとしていることです。実際のスージーサイトもこれを行いません。
これは、実際にはSusyや、ブレークポイントを正しく取得することとは何の関係もありません。デフォルトでは、モバイルサファリはビューポートの幅が980ピクセルのように機能するため、モバイルに対応していないサイトを処理できます。モバイル対応のサイトを構築した場合は、Safariに通知する必要があります。たとえば、iPhoneサファリの自動ズームを参照してください。あなたはおそらくこのようなものが欲しいでしょう：
<meta name="viewport" content="width=device-width, initial-scale=1">
キャリー、
HTC Desireの解像度はわかりませんが、レスポンシブデザインの「ブレークポイント」の適切な内訳を確認するために使用するツールの1つは次のとおりです。
http://www.josscrowcroft.com/2011/code/window-size-bookmarklet/ https://github.com/josscrowcroft/Window-Size-Bookmarklet
ビューポートのサイズを投稿するブックマークレットです。しかし、グーグルクロームを搭載したMacでは、この数値は、スクロールバーの幅とほぼ同じ量のピクセルで「オフ」になっていることがわかります。したがって、完全ではありませんが、問題のトラブルシューティングには役立ちます。
私はあなたのemが内訳の予想されるピクセル幅と一致しているかどうかを確認し、それがあなたのHTCと一致しているかどうかを確認します-また、EMが途中で台無しになっている可能性があります（ブラウザの設定、HTMLオブジェクトに適切な設定がないなど）。 ）。テスト用に固定ピクセル幅に設定して、いつでもこれをテストしてから、em（s）のすべての計算をやり直すことができます。
これが役立つかどうかはわかりませんが、少なくとも今、ベルトにツールを追加するためのオプションがもう1つあります（これについてまだ知らなかった場合は;）
幸運と乾杯、-ジェレミー