0

パーセンテージを使用して、すべての要素の幅を定義しています。display: none;また、iPhone を含むハンドヘルド専用の一部の要素を非表示( ) にしています。

html構造:

<header>
    <!-- ... -->
</header>
<nav>
    <!-- ... -->
</nav>
<div id="search">
    <!-- ... -->
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

/* ... */
header {
    width: 100%;
    height: 80px;
    /* ... */
}

/* ... */
nav {
    float: left;
    width: 76%;
    height: 20px;
    padding: 5px 2%;
}

#search {
    float: right;
    width: 16%;
    height: 20px;
    padding: 5px 2%;
}

@media only screen and (max-device-width: 480px), handheld {
    /* ... */
    header {
        height: 50px;
    }
    nav {
        width: 96%; /*plus padding 2% each = 100%*/
    }

    #search {
        display: none;
    }
}

そのため、 を非表示にし、searchを増やしてnavスペースを埋めます (100%)。ただし、右側に小さな空白があります。

画面表示:

ここに画像の説明を入力

iphone ビュー:

ここに画像の説明を入力

iPhoneビューの小さな空白を削除する方法を知っている人はいますか?
完全なコード: http://jsfiddle.net/AWGk2/

4

1 に答える 1

1

NAV要素とSEARCH要素からパディングを削除します。

NAV要素の幅を80％にし、SEARCH要素の幅を20％にします。

NAV要素とSEARCH要素の中に新しいDIV要素を追加し、それらの要素にパディングを適用します。これらの新しい内部要素に幅を指定する必要はありません。

メディアクエリセクションで、NAV幅を100％にします。

ビューポートルールに追加することも検討します。

これが私が自分で使っているものです：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
于 2013-02-08T12:15:07.187 に答える