1

レスポンシブ Web サイトを設計し、Compass Susy でプロトタイプを作成しました。

私が抱えている問題は、iPad と iPhone の Mobile Safari で、サイトを縦向きモードで読み込んでから横向きに回転すると、レイアウト全体がおそらく 30% 右にジャンプすることです (また、ズームをサイズに合わせて拡大します)。 480 ピクセルの横幅)。

いくつか試してみましたが、メタ ビューポート タグを <meta content="width=device-width, initial-scale=1" name="viewport">から <meta content="width=device-width" name="viewport">(初期スケールを削除して) に変更してもジャンプが発生しないことがわかりました。

ただし、そのプロパティがないと、最初の縦向きビューでも、私の携帯電話のレイアウトは小さすぎます。どちらの向きでも、右にガターがあり、左にフラッシュされています。

Susy グリッドの列を拡大しようとしましたが、他のプラットフォームでは明らかにレイアウトが広くなりますが、電話ではまだズームダウンされて、右側のガターが表示されます. したがって、これはある種のビューポートの問題です。

初期スケール セットでは、Android ではフィットし、横向きに回転してもジャンプしませんが、320px のままです (左右に余白があります)。

ここで何をする必要がありますか?

4

2 に答える 2

1

HTML の構造がどのように設定されているかがわからないため、あいまいになりすぎないようにします...ただし、次の手順を試して、うまくいくかどうかをお知らせください。

  1. Lokase が提供するコードを使用しますが、「user-scalable=0」の部分を削除します。
  2. タグ内のすべてを 2 つの空の div で囲みます。最初のものは「id = 'x'」を与え、2番目のものは「class = 'resizer'」を与えます。最後にタグを忘れないでください。
  3. スタイルシートに次を追加します: div:firstchild div.resizer { width:100% } #x {display:block}

これにより、ビューポート幅でドキュメントが読み込まれますが、ユーザーのスケーラビリティも確保されます。

ちょっと下手くそですが、最近私がクライアントのために行ったモバイル サイトではうまくいきました。

于 2012-06-23T18:59:31.233 に答える
0

これを試して：

<meta name="HandheldFriendly"   content="True">
<meta name="MobileOptimized"    content="320">
<meta name="viewport"           content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
于 2012-06-22T15:49:16.390 に答える