3

Twitter Bootstrapを使用していますが、モバイルデバイスで開いたときにサイトに問題が発生します。

ウィンドウのサイズを変更すると、ヘッダーが非常に悪く見えます。次のようになります。

すべてのデバイスで次のようになります。

これが私のHTMLです：

     <ul class="nav pull-right">

          <li><a href="index.html"><b>Home</b></a></li>
          <li class="divider-vertical"></li>

          <li class="dropdown">
          <a href="#" class="dropdown-togle" data-toggle="dropdown">
          <b>Download</b>
          <b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a href="downloading_link.html">Meepo for iPhone</a></li>
            <li><a href="#" id="not_active">Android coming soon</a></li>
            </ul>
            </li>

          <li class="divider-vertical"></li>
          <li><a href="faq.html"><b>F.A.Q.</b></a></li>
          <li class="divider-vertical"></li>
          <li><a href="support/index.html" id="last_link"><b>Support</b></a>
          </li>  
        </ul>

およびCSS：

   .navbar .nav.pull-right {
   margin-left: 10px;
   margin-top:40px;
   margin-right: 0;
   background-image: url('../img/menuBG.png');
   background-repeat: no-repeat;
   height:57px;
   }

モバイルデバイスで使用できるようにするには、ここで背景画像を削除する必要があると思います。

モーブルデバイス（PCと同じ）で見栄えを良くすることはできますか？携帯電話専用の新しいCSSを作成する必要がありますか？たぶん私はサイズ変更のためにレスポンシブCSSを使うべきではありませんか？

4

1 に答える 1

6

これはオーバーフローすることです。

オーバーフローを非表示またはなしに設定する必要があります。これを防ぐためにできることは他にもいくつかあります。

ビューポートのメタタグを正しく設定すると、次のようになります。

<meta name='viewport' content='user-scalable=no'>


ems やパーセンテージなど、スケーリングしやすいメニュー項目にリレーショナル値を使用することもできます。px 値を ems に変換する簡単な方法は、親要素の font-size で割ることです (通常、本文は約 16px です)。

したがって、CSS は次のようになります。

.navbar .nav.pull-right {
   margin-left: 0.625em;
   margin-top: 2.5em;
   margin-right: 0;
   background-image: url('../img/menuBG.png');
   background-repeat: no-repeat;
   height:3.5em;
}
于 2012-09-24T08:38:25.807 に答える