2

私は固定レイアウトを使用していますが、Android タブレットや携帯電話で自分のレイアウトを見ると、何らかの理由でレイアウトが壊れています。

http://www.iamvishal.com/pureecn/にアクセスしてください。

上部のナビゲーション「口座開設、カスタマーサポート、言語の選択」に注意してください

デスクトップでは問題ないように見えますが、モバイル ブラウザーでは上部のナビゲーションが壊れます。

私はそのマージンを疑っています。

#main_links_list_1,#main_links_list_2,#main_links_list_3
{

 margin-right: 65px;
 position: relative;
}
4

6 に答える 6

4

Pretty much things are breaking because you have half of your layout "fixed" and the other half "fluid". For example:

div.section {
margin-left: auto;
margin-right: auto;
width: 960px;          /*fixed*/
position: relative;
}

#main_links_container {
    float: left;
    width: 80%;       /*fluid*/
}

Also note that when no width is set for an element, the default is auto.

Open your site on a desktop and try resizing the browser window you will probably see the same issue that you're seeing on mobiles and tablets.

If you really want to avoid media selectors you could try changing this-

html, body, #page {
height: 100%;
}

To something like this-

html, body, #page {
width: 1200px;
margin: 0 auto;
}
于 2013-04-12T04:44:21.050 に答える
2

CSS でメディア クエリを使用して、モバイル デバイスでの制御を強化します。

@media screen and (max-width: 767px) {
    #main_links_list_1,#main_links_list_2,#main_links_list_3
    {
    margin-right: 15px; // reduced amount for mobile devices and tablets
    position: relative;
    }
}

これが現在の CSS より下にあることを確認してください。そうしないと、オーバーライドされます。

于 2013-04-06T12:43:09.953 に答える
1

あなたの問題はProfessional Solutions、最後のリンクが非常に長いセクションで発生する可能性があり、レイアウトが壊れます。

cssファイルでこれを試してください：

#professional_solutions_list {
  max-width: 180px;
  width: 100%;
}

次の画面を参照して、私の意図を理解してください (赤い線はメニューが到達する場所、青い線は実際の場所です)。

ここに画像の説明を入力

アップデート

次の状態はデフォルトの状態であり、タブレットで発生した問題があるため、適用されるルールに注意してください。

ここに画像の説明を入力

そして、これを追加した後max-width: 180px、問題は解決されます:

ここに画像の説明を入力

FireBugを使用して CSS ルールをライブで編集します

編集：

あなたのコメントを受けて、私はウェブサイトを再度チェックしました。削除してください:

幅: 94%;

id の div から:secondary_links

于 2013-04-17T14:46:21.770 に答える
1

あなたは間違っていると思いました。レスポンシブ レイアウトが必要であり、修正する必要はありません。zurb Foundation v4 をご覧になることをお勧めします。

于 2013-04-17T11:47:40.133 に答える