携帯電話のウェブサイトのバージョンがデバイスの画面の向きに応じて壊れます

Question

背景のビット：私は、私の特別なカリキュラムロボットチームによって使用されているウェブサイトを再設計するためにボランティアした学生です。 Bootstrapとレスポンシブデザインを作成して作業するのは初めてのことですが、テストドメインにウェブサイトをアップロードしてモバイルデバイスで見るまで、すべてのことは非常に順調に進んでいます。

私が直面する問題は、デバイスの向きに応じて、ナビゲーションバーの幅とコンテンツをウェブサイトで扱うことです。デバイスがポートレートモード（垂直）になっている間は、ナビゲーションバーとコンテンツのテキストに十分なスペースがないため、ページを極端に長くして多くのスペースを占有します。一方、デバイスが横向きであれば、ウェブサイトは、少なくとも私が考えているもの、完全に細かいものです：

http://imgur.com/gallery/toZYt（アルバムは現在2つ以上のリンクを投稿できないため、写真を表示できません

私はウェブページのビューポート/初期尺度を試していますが、これはナビゲーションバーとコンテンツの幅を変更しますが、ナビゲーションバーのテキスト/ロゴは押し込まれます。比較的低品質にも見えます。メディアの最小/最大幅の変更は何もしないようです。私はこれをどうやって解決するか、それが@mediaの問題であるかどうか、またはメニュー/コンテンツ用のCSSと関係があるかどうかについては固執しています。私はCSSのメインCSSのコンテンツの125pxのマージンを持っています。主にデスクトップのサイトはすばらしく見えるので、多分それは何かと関係していますか？

私は他の記事や他のウェブサイト上で、以前この問題を研究しようとしたが、私は私の問題に関連するように見えた何かを見つけることができませんでしたし、何か提案が本当に解決しませんでした/主要な方法でウェブサイトに影響を与えます。私は、テキスト/コンテンツのマージンだけでなく、ウェブサイト（風景/デスクトップ）の他のフォームに影響を与えずにこれを修正することができると期待しています。

他の携帯電話（OnePlus X、iPod 5th Generation、iPhone 6でテスト済み）でも問題は解決されていますが、タブレットでテストすることはできませんでした。誰かが私のためにウェブサイト上でこの問題を解決するための提案があれば、それは非常に感謝されます。読んでくれてありがとう！

Answer 1

CSSのメディアクエリを調べる必要があります。 修正する必要があるものがいくつかあります（125ピクセルのマージンを含む）。

は例えば、そのマージンはそう何を行うべきことで、モバイルデバイスのための方法は大きすぎる：

.element { 
    margin: 0 15px; /* Default margin */ 
} 

@media only screen and (min-width: 1024px) { 
    .element { 
    margin: 0 125px; /* Margin for displays > 1024px */ 
    } 
} 

あなたは同じ要素に影響を与える複数のメディアクエリを設定することができます。お使いのブラウザの内蔵の応答ビューを使っている低解像度でのデバッグレイアウトに

/* ... */ 
@media only screen and (min-width: 1024px) { 
    .element { 
    margin: 0 125px; /* Margin for displays > 1024px */ 
    } 
} 

@media only screen and (min-width: 1280px) { 
    .element { 
    margin: 0 200px; /* Margin for displays > 1280px */ 
    } 
} 

良い方法：上記の例で作成するには、1280px @ 1つの以上のクエリを持つことができます。 これは、すべての主要なブラウザで行うことができます。たとえば、Chromeの場合は、開発ツール（Ctrl + Shift + IまたはCmd + Opt + I）を開き、左上の電話+タブレットアイコンをクリックする必要があります。

---

私はあなたのウェブサイトをよく見ていた後、私はあなたがそれが小さいビューポート上で良く見えるようにするために、それに適用することができますいくつかの修正が見つかりました：

1：（最初に削除します。ナビゲーションバーブランド>のIMGインラインスタイル（最大幅とマージントップ）

.navbar-brand img { 
    max-width: 200px; 
    margin-top: 14px; 
} 

@media only screen and (min-width: 440px) { 
    .navbar-brand img { 
    max-width: 350px; 
    margin-top: 7px; 
    } 
} 

2：これはまだ多くのをしない場合は小さな画面

.border-control { 
    padding-left: 15px; 
    padding-right: 15px; 
} 

@media only screen and (min-width: 768px) { 
    .border-control { 
    padding-left: 125px; 
    padding-right: 125px; 
    } 
} 

の境界線コントロールのパディングを調整私はあなたがmedia queries hereを読んで、彼らがどのように深く働いているかを理解することをお勧めします。