2

iPhoneとiPadで発生するWebサイトのバグを修正しようとしています。

あなたはここでページを見ることができます:http: //revivelab.com/demo_sites/iphoner/

これは特に私が言及している休憩です:

ここに画像の説明を入力してください

iPhoneにロードすると、最初は問題ないように見えますが、ズームインすると、要素は含まれているdivの外側に飛び出します。

茶色/カーキ色の背景が100%幅のdivに適用され、次に幅1024pxのdivがその内側に中央に配置され、ティールボックスがそのdivの内側にあります。それが壊れたとき、それはそれの100%幅の容器の外でさえ壊れています。

誰かがこれに遭遇したことがありますか?解決策のアイデアはありますか?

4

1 に答える 1

2

この問題は、ほとんどのモバイルブラウザでの親要素のサイズとデフォルトのビューポートサイズの不一致が原因であると思われます。

iPadとiPhoneは、デフォルトでビュースペースをシミュレートされた980pxの幅にデフォルト設定し、要素に割り当てた最小サイズは986pxであり、その子要素#content_containerの幅は100%です。

これで、#content要素の計算幅は1024pxになり、パディングが適用されます(親の最小値よりも大きくなります)。

次に、.content_left要素の実際の幅は1024pxで、親の実際の幅である1014pxを超えています。

したがって、これらのサイズをメッシュ化する必要があるように見えます。この問題を解決すると思う2つの選択肢があります。

(1)#content要素と.content_left要素のサイズを970pxに、タグの最小サイズを980pxに縮小します。

(2)ビューポートメタタグを追加して、最終的に得られた1034pxの幅を超えてページを単純に拡張します

<meta name="viewport" content="width=1034">

これがお役に立てば幸いです。

于 2012-09-28T16:05:25.397 に答える