1

デザインをモバイルフレンドリーにしようとしています。私が持っているのは、http://ipadpeek.com/ (素晴らしいツール!) でデザインを見るとすべてがうまく収まりますが、実際に iPhone 4 で表示すると、コンテンツはページの約 80% しか占めません。残りの 20% は白い背景です。

幅全体に収まるように見える要素が 1 つだけあり、これは次のスタイルを持ちます。

<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>

.text-elements {
    float: none;
    margin: 0;
    padding: 75px 10px;

    h2 {
      font-size: 4em;
      width: 100%;
    } 
}

なぜこれが起こっているのですか？

4

1 に答える 1

1

参考までに、 http://ipadpeek.com/などのオンラインの iPad スタイル ツールのほとんどは、いずれにせよ、これらのオーバーフローの問題を検出する傾向はありません。

最終的に、問題は明示的な幅が設定された少なくとも 1 つ以上の div であることがわかりましたが、原因として見つけるのは非常に困難でした!

この問題を抱えている他の人へのヒント:

  1. デザインがレスポンシブになることがわかっている場合は、明示的な幅の div のメイン スタイルシートで , , を使用して、後のコースでそれらが原因になるのを回避しますmax-width: Xpx。width: 100%

  2. アイテムで width: 100% を使用する場合は、必ず内側の div に追加のパディングを追加するか (特にピクセル単位の場合)、または , などを考慮してwidth: 95%くださいpadding: 2.5%。

  3. overflow: hiddenコンテンツを保持する主要なラッパーをいくつか試して、問題の原因を確認してください。

于 2013-01-11T13:35:38.850 に答える