モバイルブラウザでヘッダーが重複するのはなぜですか？

Question

モバイルブラウザで表示したときに、ヘッダ領域が重複しないようにするにはどうすればよいですか？http://androdevlab.com

Answer 1

メディアクエリを使用する必要があります。あなたはここでメディアクエリの詳細を読むことができます：

http://www.w3.org/TR/css3-mediaqueries/

http://reference.sitepoint.com/css/mediaqueries

http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

ます。またFitText.jsのようなプラグインを使用することができます - あなたのサイトのためのコードを見てみるとhttp://fittextjs.com/

Firebugでは、主な問題は、「Android搭載端末のNYCポータブルラボはあなたのドアに届いています」という行の高さが大きすぎることです。それは現在値なしの1.8である。おそらく1emまたは1.25emの小さな値に設定してみてください。同様にnav-primary li aクラスの場合。

また、nav要素の幅は980pxと定義されているため、どのデバイスでもこれは固定値になります。たぶん％またはemベースの値を設定しようとすることができます。

@screen CSSを同じにしてモバイル版の多くの要素を変更する必要がある場合は、メディアクエリを使用する必要があります。物事をより扱いやすくします。

Answer 2

responsive designのトリックを使用する必要があります。 ：meta viewportタグを設定すると、@mediaは調整済みCSSを照会します。ヘッダーのマージンとサイズを他の設定サイズのpxではなく％またはemで指定します。syzeなどのjsライブラリとhtml5boilerplateのようなプロジェクトを使用してこれを手助けすることができます。