-2

私の 1 ページの Web サイトでは、モバイル デバイスで 2 行かかるため、ナビゲーションが悪く見えます。

スクリーンショット

ここにコードがあります

#navigation {
font-family: 'Open Sans', sans-serif;
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: gray;
}
4

3 に答える 3

0

ここでの問題は、モバイル デバイスではnavbar、[今は大きい] テキストが に収まるために の幅が狭くなりすぎることnavbarです。にテキストを合わせるにはnavbar、小さな画面のデバイスで Web サイトを実行しているときにフォント サイズを縮小する (および他の人がパディングを述べているように) か、または のレイアウトを変更する必要がありますnavbar。画面サイズを検出するには、次のようなものを CSS に追加する必要があります。

@media only screen and (max-width: 999px) {
    /* rules that only apply for canvases narrower than 1000px */
}
@media only screen and (device-width: 768px) and (orientation: landscape) {
    /* rules for iPad in landscape orientation **/
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    /* iPhone, Android rules here */
    #navigation a{
        font-size: 8px;
        padding: 0 0 0 0;
    }
}
于 2013-08-14T18:16:23.563 に答える
0

padding-left と padding-right のため、アンカーごとに 30 ピクセルかかります (a)。スクリプトを使用してモバイル ブラウザーを検出し、パディングをより低い値に変更する必要があります。

PS: あなたの問題にはもっと一般的な解決策があるかもしれません。

于 2013-08-14T18:08:40.657 に答える