1

メディア クエリを使用して Web サイトをレスポンシブ html5 に移行した後、css が display:block および幅:100%。
例:

http://i.imgur.com/QUxffNT.jpg

http://dev.shermanbrothers.com (ユーザー名: devreview パスワード: De3e3vfr4 ) [サイトへの html5 更新]

また、古いバージョンのサイトでも同様の問題が発生します。

http://i.imgur.com/1sS4WRZ.jpg

http://shermanbrothers.com [表ベースのレイアウトの古いバージョンのサイト、まだ同様の問題があります]

現在、これがデスクトップ ブラウザの狭いウィンドウではなくモバイルで発生している理由について、いくつかの推測があります。

  • メイン/ヘッダーとフッター間の要素のような一部のブロック レベル要素は、コンテンツが多すぎて 100% に縮小することさえできません。
  • または、中央のセクションで display:table を使用すると、他のブロックや 100% 幅の要素よりも大きく膨らませることができます。

しかし、問題に対処するためにどのようなテクニックを使用すればよいかわかりません。-モバイル経由でコードを調べて、違いの理由を判断することさえできません。- CSS の max-width をコンテナー内の画像 (例: max-width:100% ) に設定するのは良くありません。

では、モバイル固有のバグ、特にモバイルの幅/レイアウトの問題をどのようにデバッグして対処すればよいのでしょうか?

4

8 に答える 8

2

フォントサイズ

フッター列の一番上の要素 ( footer-flex) にはfont-size: 10px. そして、子要素 ( .footer-block) にはfont-size: 2em. これは、.footer-block要素が を持っていることを意味しますfont-size: 20px。(10px(トップ要素のフォントサイズ) * 2em) = 20px. これにより、フッターに大きなテキストが表示されます。

画面

float要素を並べて配置するために使用していますが、これは非常に悪い習慣です。要素を適切に整列させたい場合は、display: table-cellまたはを選択する必要がありますdisplay: inline-block。違いはタグtable-cellと同じです。<td>これは、連続するすべての要素が同じであることを意味しますheight。

タグのtable-cellように機能するため、 は sを持つことができません。が必要な場合は、 style を持つtop 要素を提供する必要があります。あなたのケースに非常に適した例: http://jsfiddle.net/R3zDu/tdtable-cellmarginmargintable-celldisplay: tableborder-spacing

ご覧のとおり、clear: bothorfloat: blah定義と明確な css 定義はありません。

これは「もう使わない」という意味ではありませんfloat。floatの主な目的は、テキスト/段落内の画像を揃えることです。

  1. floatおよびclear: bothスタイルをすべてクリアします。
  2. 適用table-cell方法。

テスト

携帯電話のようにページをレンダリングするソフトウェアはないと思います。一方、iOS に問題がある場合は、PC または Mac の Safari ブラウザーを調べることができます。これは、ほとんどの場合 (少なくともあなたの場合)、iOS Safari のように機能します。

于 2013-11-19T16:32:31.507 に答える
2

見なければならないマークアップが非常に多いため、テーブルはこの問題を診断する上で大きな頭痛の種です。ただし、テーブルがレイアウトが壊れている理由ではありません (少なくとも、この質問に出くわしたときに見たマークアップではそうではありません)。問題は、画像、テキスト、およびテーブルの列に非常に多くの固定幅があることです。

これを修正するには、メディア クエリにブレークポイントを設定する必要があります。画像の場合は次のようになります。

@media (min-width: Whatever is the smallest screen size the image will not break your layout) and (max-width: 1 pixel below the previous size where the image was so wide it broke your layout) {
    .header-image {
        width: whatever is the widest width that keeps it from breaking your layout; // This will change with smaller queries
        height: auto;
    }
}

そして、あなたのフォントには次のようなものがあります：

@media (min-width: Whatever is the smallest size the font will not break your layout) and (max-width: 1 pixel below the previous size where the font was so wide it broke your layout) {
    .navbar-font {
        font-size: whatever is the biggest font size that keeps the font from breaking your layout;

    }
}

別の方法として、フォントの場合、画面が小さくなるにつれて折り返すように指示することもできますが、折り返されるときに高さを考慮に入れる必要があります。

.navbar-font {
    white-space: pre-wrap;
}

上記と同様のことを行って、テーブルの列の幅も適切にサイズ変更できるようにします。

また、@TylerEich の提案に従い、ビューポートを構成してください。

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

http://developer.android.com/guide/webapps/best-practices.html

最後に、モバイル ブラウザー テスト用のBrowserStackを確認してください。

これですべてのレイアウトの問題が解決されるわけではありませんが、私が見つけた最大の問題は解決されました。テーブルベースのレイアウトは扱いが面倒です。幸運を ：）

于 2013-11-20T18:39:15.357 に答える
0 
#head{
  float:left;
  width:100%;
}

  #content_head{
    display:table;
    margin:0 auto;
  }

#body{
  float:left;
  width:100%;
}

  #content_body{
    display:table;
    margin:0 auto;
  }

#footer{
  float:left;
  width:100%;
}

  #content_footer{
    display:table;
    margin:0 auto;
  }
于 2013-11-19T18:46:58.597 に答える
0

表示ブロックと幅を 100% に使用し、float と max-width、min-width プロパティも削除します。

また、ビューポートのメタデータが既にあるため、ブラウザーを使用するだけでモバイルをシミュレートできます。ブラウザの幅を変更するだけです。

于 2013-11-21T09:04:55.580 に答える